使用多选选项的JQuery Datatable列过滤

Question

对于我的应用程序，我将JQuery数据表与实现框架一起使用。我的表包含以下列： 1.名称2.位置3.Office 4.Age 5.Date和6.Salary 在此，我正在为表中的“ Office”和“ Age”列动态创建一个多选过滤器响应。我在下面的JSFiddle链接中尝试了我的示例。

JSFiddleJSFiddle

但是过滤仅适用于单选项，而不适用于多选过滤。同样，“ Office ”和“ Age ”过滤器之间没有关系，它们都可以单独工作。

如何解决这个问题？

Answer 1

尝试将任何更改事件分开以进行选择。

尝试这个：

$(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( '<option value="'+d+'">'+d+'</option>' )
            } );
          } );
           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( '<option value="'+d+'">'+d+'</option>' )
            } );
          } );
          $("#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