datatable js 按列筛选_使用多选选项的JQuery Datatable列过滤

For my application, I am using JQuery datatable with materialize frame work. My table is having the following columns:

1.Name 2.Position 3.Office 4.Age 5.Date and 6.Salary

In that, I am dynamically creating a multi select filter for 'Office' and 'Age' column from the table response. I have tried my example in the follwing JSFiddle link.

JSFiddleJSFiddle

But filtering is only working for single option and for multi select filtering it is not working. Also there is no relationship between 'Office' and 'Age' filters, both are working individually.

How to fix this?

解决方案

Try to separate the event of any change to select.

Try this:

$(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( ''+d+'' )

} );

} );

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( ''+d+'' )

} );

} );

$("#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();

});

});