I used the following code to populate a table with multiselect filters on each columns and it works just fine : multiselect columns filters table exemple
$(document).ready(function() {
$('#example').DataTable({
initComplete: function() {
this.api().columns().every(function() {
var column = this;
//added class "mymsel"
var select = $('<select class="mymsel" multiple="multiple"><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function() {
var vals = $('option:selected', this).map(function(index, element) {
return $.fn.dataTable.util.escapeRegex($(element).val());
}).toArray().join('|');
column
.search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
//select2 init for .mymsel class
$(".mymsel").select2();
}
}); });
However, when I select a value in a random column filter, the other filters offers the list of all possibles values instead of the distinct ones based on the previous filter.
Is there a way to do this ?