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

Question

我正在使用 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  

    });
});

Answer 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;
    });