Question

我在我的jquery中构建了一个像这样的数据表：

var ticketDataTable = $("#ticketDataTable").DataTable({
        serverSide: true,
        ajax: {
            url: ajaxUrl,
            type: "POST",
            data: function(data) {
                data.ticketStatusFilter = ketStatusCheckboxes.filter(':checked')
                    .map(function() { return this.value; }).get()
                    .join(';')
            }
        },
        columns: [
            { 
                 name: "ticket.ticketNumber",
                 data: "0.ticketNumber" 
            },
            { },
            { },
            { },
            { },
            { },
            { },
            { },
            { },
            { },
            { },        
            { },
            { },
            { },
            { },
            { }
        ],
        bSortCellsTop: true,
        dom: 'rt<lp>',
        order: [[2, "desc"]]    // Sort by descending date
    });

所有列都以相同的方式构造。然后，我使用sumoSelect插件创建一个带有复选框的下拉列表，以进行多重过滤。

$("table#ticketDataTable thead tr th#multiSelectFilter").find("select").SumoSelect({ selectAll: true });

效果很好。然后，当输入改变时（当我检查选择时），我这样做：

var arr = $("table#ticketDataTable thead tr th#multiSelectFilter").find("select")[0].sumo.getSelStr();

我得到的结果如下："FIRST|SECOND|THIRD"或"SECOND"或"FIRST|SECOND"。

ticketDataTable.column(5).search(arr,true,true).draw();

但它只适用于一种选择。如果我有多个（例如＆＃34; FIRST | SECOND＆＃34;），它就不起作用。

Answer 1

解决方案是添加自定义过滤器，然后调用表draw()函数来过滤掉必要的数据。您将把逻辑放在此自定义过滤器中。

因此，从我所看到的是你有一个多选，你想要选择列5中有多个选择中的任何一个值的所有行。这是一个简短的想法。

    $.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
        if (settings.nTable.id === "ticketDataTable") { // apply this fiter only to your ticketDataTable table.
            return CheckIfRowIsValid(data[5]); // data[5] will give you current row column idex 5's value.
        }
        else { //filter function not applicable to other datatables other than ticketDataTable so do nothing.
            return true;
        }
    }
   );

    function CheckIfRowIsValid(value) {
        var multiSelectArray = []; // get all the values from multi select.

        if ($.inArray(value, multiSelectArray) < 0) {
            return false;         //if value is not found in array return false as you dont have to show the row.
        }
        else {
            return true;          //return true to keep the row visible.
        }
    }

正如您所看到的，自定义逻辑将针对每一行触发一次，只需说明返回true或false即可保留或删除行。 This example just concentrates on single column with multiple possible values。您也可以扩展它以处理多个列。只需为每列添加if if。

现在，每当您想要过滤表格时，只需拨打ticketDataTable.draw()

即可

Answer 2

我找到了解决问题的方法。我在我的ajax请求中添加了新数据。我在服务器端使用它来完成我的请求。然后我每次点击我的过滤器更改数据，然后重新启动请求。

工作正常！

单个列上的Jquery DataTable多次过滤并不起作用

2 个答案: