使用多选选项的JQuery Datatable列过滤 [英] JQuery Datatable column filtering using multi-select options

问题描述

对于我的应用程序，我正在使用具有物化框架工作的JQuery数据表。我的表格中包含以下列：
1.Name 2.Position 3.Office 4.Age 5.Date and 6.Salary
在那里，我动态创建一个表格响应中的Office和年龄列的多选过滤器。我在下面的JSFiddle链接中试过我的例子。

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.

JSFiddle JSFiddle

但过滤仅适用于单一选项，对于多选过滤，它是不工作此外， Office 和年龄过滤器之间没有关系，两者都是单独工作。

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.

如何解决这个问题？

推荐答案

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

Try to separate the event of any change to select.

试试这个：

$(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

这篇关于使用多选选项的JQuery Datatable列过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！