Problème filtrage jQuery avec DataTables

Fermé
Max - Modifié par jordane45 le 10/05/2016 à 01:12
jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 - 10 mai 2016 à 01:18
Bonsoir à tous !

Je fais appelle à vous car j'ai un problème concernant le plugin jQuery DataTables.

J'ai un problème avec ce qui concerne le tri ou plutôt le filtrage individuel par colonne.

Voici le résultat que je veux : https://datatables.net/examples/api/multi_filter.html

En revanche, mon code ne fonctionne pas pour le filtrage de chacune des colonnes.

Voici mon code si quelqu'un peut m'éclairer sur une erreur ou me donner des conseils, cela serait génial !!
           // DataTable
           $("#table-audio-library").dataTable({
   "bJQueryUI" :  true,
   // Traduction en langue française
   "language": {
    "sProcessing":     "Traitement en cours...",
    "sSearch":         "Rechercher :  ",
    "sLengthMenu":     "Afficher  _MENU_  éléments",
    "sInfo":           "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
    "sInfoEmpty":      "Affichage de l'élément 0 à 0 sur 0 élément",
    "sInfoFiltered":   "(filtré de _MAX_ éléments au total)",
    "sInfoPostFix":    "",
    "sLoadingRecords": "Chargement en cours...",
    "sZeroRecords":    "Aucun élément à afficher",
    "sEmptyTable":     "Aucune donnée disponible dans le tableau",
    "oPaginate": {
     "sFirst":      "Premier",
     "sPrevious":   "Précédent",
     "sNext":       "Suivant",
     "sLast":       "Dernier"
    },
    "oAria": {
     "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
     "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
    }
   }
  })
   
 // Ajouter un input saisie de texte pour chaque colonne du tableau
 $('#table-audio-library tfoot th').each(function(){
  var title = $(this).text();
   $(this).html('<input type="text" class="form-control input-sm" placeholder="Rechercher par '+title+'" />');
   });

   var table = $('#table-audio-library').DataTable();

 // Appliquer la recherche
 table.columns().each(function(){
  var that = this;
  $('input',table.column().footer()).on('keyup',function(){
   if(that.search() !== this.value){
    table
            .column()
     .search(this.value)
     .draw();
   }
     
        });
  });


EDIT : Ajout des balises de code

1 réponse

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 647
10 mai 2016 à 01:18
Bonjour,

Que t'affiches la console de ton navigateur ?
je te conseille d'utiliser le plugin firebug (pour firefox).

Et puis.. ne te manquerait-il pas un point-virgule ligne 27 du code que tu nous as donné ?

Sans oublié .. tu as placé ton code dans le document ready (ou après ton html) ?

Sans oublié que tu as utilisé un EACH alors que datatable utiliser un EVERY
Tu as écrit :
 table.columns().each(function(){

Alors que dans l'exemple ils font :
 table.columns().every( function () {

Le code qui est derrière étant différent selon que tu écrire l'un ou l'autre.
Par exemple :
https://datatables.net/reference/api/rows%28%29.every%28%29

0