如何在 jquery 数据表中使用多列过滤器

Posted 2023-04-12

【中文标题】如何在 jquery 数据表中使用多列过滤器

【英文标题】：How to use multi column filter in jquery datatables

【发布时间】：2019-10-16 03:56:05

【问题描述】：

我正在使用 Jquery 数据表将我的文件从 sql 数据库导出到 excel 中。我的数据表上有 3 个列过滤器，它们可以独立工作。我希望他们以某种方式使用或调节条件，即从满足过滤器条件的任何一个数据表中获取所有数据。下面是我的代码示例。

 $(document).ready(function () 
   var table = $('#studentTable').DataTable(
        "ajax": 
            "url": "/StructuredImportTgts/GetData",
            "type": "GET",
            "datatype": "json"
        ,
        responsive: 'true',
        dom: 'Bfrtip',
        buttons: [
            'copy', 'excel', 'pdf'
        ],
        "columns": [
             "data": "PART_NO" ,
             "data": "LEVEL" ,
             "data": "PART_NO" ,
             "data": "PART_NAME" ,
             "data": "L1QTY" ,
             "data": "PL1" ,
             "data": "PL2" ,
             "data": "PL3" ,
             "data": "SupplierLocID" ,
             "data": "SupplierLocID" ,
             "data": "Discrepancies" ,
             "data": "Comments" 
        ],

        initComplete: function ()  // After DataTable initialized 
            this.api().columns([1, 5, 6]).every(function () 
                /* use of [1,2,3] for second, third and fourth column.  Leave blank - columns() - for all.  
                Multiples? Use columns[0,1]) for first and second, e.g. */
                var column = this;
                var select = $('<select><option value=""/></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () 
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                    );
                column.data().unique().sort().each(function (d, j) 
                    select.append('<option value="' + d + '">' + d + '</option>')
                );
            ); // this.api function 
         //initComplete function  

    );
);

【问题讨论】：

你可能想看看this插件

我尝试使用它，但现在为我工作

【参考方案1】：

对于遇到类似问题的人，这是我的解决方法。

$(document).ready(function () 
    $('#studentTable').DataTable(
        "ajax": 
            "url": "/StructuredImportTgts/GetData1",
            "type": "GET",
            "datatype": "json"
        ,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'excel', 'pdf'
        ],
        "columns": [
            // "data": "PART_NO" ,
             "data": "LEVEL" ,
             "data": "PART_NO" ,
             "data": "PART_NAME" ,
             "data": "L1QTY" ,
             "data": "PL1" ,
             "data": "PL2" ,
             "data": "PL3" ,
             "data": "SupplierLocID" ,
            // "data": "SupplierLocID" ,
             "data": "Discrepancies" ,
             "data": "Comments" 
        ],

        initComplete: function () 
            this.api().columns([4,5,6]).every(function () 
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () 
                        $('#studentTable').DataTable().draw();
                    );

                column.data().unique().sort().each(function (d, j) 
                    select.append('<option value="' + d + '">' + d + '</option>')
                );
            );
        

    );
);

$.fn.dataTable.ext.search.push(
    function (settings, searchData, index, rowData, counter) 
        if (settings.nTable.id !== 'studentTable') 
            return true;
        

        var position = $("#position option:selected").text();
        var office = $("#office option:selected").text();
        var off = $("#off option:selected").text();

        // Display the row if both inputs are empty
        if (position.length === 0 && office.length === 0 && off.length === 0) 
            return true;
        

        // Display row if position matches position selection
        hasPosition = true;

        if (position !== searchData[4]) 
            hasPosition = false; //Doesn't match - don't display
        

        // Display the row if office matches the office selection
        hasOffice = true;

        if (office !== searchData[5]) 
            hasOffice = false; //Doesn't match - don't display
        

        hasOff = true;

        if (off !== searchData[6]) 
            hasOff = false; //Doesn't match - don't display
        

        // If either position or office matched then display the row        
        return true ? hasPosition || hasOffice || hasOff : false;
    );