jQuery dataTables cliquez sur l'en-tête d'un événement personnalisé

Comment puis-je ajouter un événement click pour certains de la table des en-têtes dans la datatable. J'ai enlevé le tri par défaut des événements de chaque colonne, à l'exception de la 1ère colonne. Donc, je tiens à ajouter que l'événement personnalisé à ces colonnes. Et je veux trouver l'index de la colonne de l'utilisateur a cliqué.

Ce que j'ai essayé jusqu'à présent est le présent. Mais je ne peux pas comprendre comment trouver l'index de la colonne utilisateur a cliqué.

var table = $('#example').dataTable( {
    "data": data_set,
    "columns": column_titles,
    "columnDefs": column_defs
} );

$('#example thead').on( 'click', 'th', function () {         
    alert( 'Column clicked on: ');
} );

P. S.
J'ai trouvé cet article https://datatables.net/reference/api/column().l'en-tête() et de suivi. Mais quand je l'appelle de la table.de cellules() , il donne une erreur.

$('#example tbody').on( 'click', 'td', function () {
    var idx = table.cell( this ).index().column;
    var title = table.column( idx ).header();

    alert( 'Column title clicked on: '+$(title).html() );
 } );

quelle est la version de tables de données?

OriginalL'auteur Maduranga Siriwardena | 2014-12-25

http://jsfiddle.net/zwkggt7r/3/

Essayer

$(document).ready(function() {
    var table = $('#example').dataTable();
    table.on('click', 'th', function() {
        var info = table.fnSettings().aaSorting;
        var idx = info[0][0];
        alert(idx);
    });
});

Ne fonctionne pas avec la dernière version de tables de données (Erreur: la table.fnSettings n'est pas une fonction)..

OriginalL'auteur waki

1

Vous obtenez l'index en cliquant sur les en-têtes comme ceci :
```
$('#example thead').on('click', 'th', function () {
  var index = table.column(this).index();
  alert('index : '+index);
});
```
Cela fonctionne avec les colonnes masquées, réorganiser les colonnes du sna ainsi de suite.

violon> http://jsfiddle.net/1kjooq9w/

Mon problème était la façon dont j'ai choisi ma table. Voir ma réponse stackoverflow.com/a/27650447/1537365

OriginalL'auteur davidkonrad
1

L'extrait de code que j'avais trouvé était correct sauf pour une petite pièce.

En utilisant le code ci-dessous correctement créer le dataTable.
```
var table = $('#example').dataTable( {
    "data": data_set,
    "columns": column_titles,
    "columnDefs": column_defs
} );
```
Mais il ne fonctionne pas correctement, sélectionnez la table. Plus tard, lorsque j'essaie d'accéder à l'objet de la table il n'a pas la méthode de la "cellule".

Code doit être corrigée comme
```
var table = $('#example').DataTable( {...
```
Alors maintenant, la table a la "cellule" de la méthode.

Donc le code final sera comme ci-dessous.
```
var table = $('#example').DataTable( {
    "data": data_set,
    "columns": column_titles,
    "columnDefs": column_defs
} );

$("#example").find("thead").on('click', 'th', function(){
    var col_idx =  table.column(this).index();
    console.log("colId = " + col_idx);
});
```
Oui, correcte lorsque vous cliquez sur <td>'s , par exemple, sur des données, mais il échoue lorsque vous cliquez sur les en-têtes.

OriginalL'auteur Maduranga Siriwardena
0

Il a été un long temps depuis que j'ai utilisé les tables de données, mais je pense que vous pouvez la réaliser avec cell().index(). Découvrez la doc: https://datatables.net/reference/api/cell().index()
```
$('#example thead').on('click', 'th', function () {         
    alert( 'Column clicked on: ' + table.cell(this).index().column);
});
```
J'obtiens une erreur "Uncaught TypeError: undefined n'est pas une fonction" quand j'ai essayer cette
Mon problème était la façon dont j'ai choisi ma table. Voir ma réponse stackoverflow.com/a/27650447/1537365

OriginalL'auteur Lim H.
0

Vous pouvez facilement le faire en utilisant ordre méthode de la table. Ma technique fonctionne bien.

Nous devons faire deux choses ici.
- En cours d'index de colonne
- S'appliquent par ordre croissant ou décroissant d'action sur la colonne particulière sur le fait de cliquer sur un icône
Ici, nous supposons que nous avons un bouton ou un lien qui cliquez sur à lier.
```
$(".arrow-sort-ascending").bind("click", {
 //Sorting should happen here
}
```
Obtenir un index de colonne

- Je utiliser les génériques de façon à obtenir un nom de colonne. Si vous utilisez Jquery, nous pouvons récupérer l'index de colonne à l'aide de ce.
```
myColumn = $(parent).prevAll().length
```
où parent devrait être le th de colonne particulière.

L'application de croissant ou tri décroissant
```
 //ascending
 myTable.order([myColumn, "asc"]).draw()
```
Donc, si nous avons mis le code dans un seul article, ça ressemble à ça.
```
table = myTable //This is datatable you initialized

$(".arrow-sort-ascending").bind("click", {table: table}, function(event){
    parent = $(event.target).parent()
    myIndex = $(parent).prevAll().length;
    table.order([myIndex, "asc"]).draw()
}
```
Donc à chaque fois que nous cliquons sur le arrrow icône, il trie la colonne.

OriginalL'auteur Naren Yellavula

var table = $(`#mytable`).DataTable({
    ...
});

var headers = table.columns().header().toArray();

$(headers).on('click', function () {
    //do something
});

OriginalL'auteur 蘇超人

Vous devez vous connecter pour publier un commentaire.

Obtenir un index de colonne

L'application de croissant ou tri décroissant