Filtrage des colonnes JQuery Datatable à l’aide d’options de sélection multiple

Pour mon application, j’utilise JQuery datatable avec du travail sur châssis Materialise. Mon tableau contient les colonnes suivantes: 1.Nom 2.Position 3.Office 4.Age 5.Date et 6.Salary En cela, je crée dynamicment un filtre de sélection multiple pour les colonnes “Office” et “Age” du tableau réponse. J’ai essayé mon exemple dans le lien JSFiddle suivant.

JSFiddle JSFiddle

Mais le filtrage ne fonctionne que pour une seule option et pour le filtrage à sélections multiples, il ne fonctionne pas. De plus, il n’y a pas de relation entre les filtres ” Office ” et ” Age “, les deux fonctionnent individuellement.

Comment régler ceci?

Essayez de séparer l’événement de tout changement à sélectionner.

Essaye ça:

 $(document).ready(function (){ var table = $('#example').DataTable({ dom: 'lrtip', initComplete: function () { this.api().columns([2]).every( function () { var column = this; console.log(column); var select = $("#officeFltr"); column.data().unique().sort().each( function ( d, j ) { select.append( '' ) } ); } ); this.api().columns([3]).every( function () { var column = this; console.log(column); var select = $("#ageFltr"); column.data().unique().sort().each( function ( d, j ) { select.append( '' ) } ); } ); $("#officeFltr,#ageFltr").material_select(); } }); $('#officeFltr').on('change', function(){ var search = []; $.each($('#officeFltr option:selected'), function(){ search.push($(this).val()); }); search = search.join('|'); table.column(2).search(search, true, false).draw(); }); $('#ageFltr').on('change', function(){ var search = []; $.each($('#ageFltr option:selected'), function(){ search.push($(this).val()); }); search = search.join('|'); table.column(3).search(search, true, false).draw(); }); }); 

jsfiddle