jQuery DataTable在单个列上进行多个筛选不起作用

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();

但是，它只有一种选择。 如果我有多个（例如“ FIRST | SECOND”），则无法使用。

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.
        }
    }

如您所见， 自定义逻辑将为每行触发一次 ，只需说return true或false，您就可以保留或删除行。 This example just concentrates on single column with multiple possible values 。 您也可以扩展它以在多个列上工作。 只需为每列添加else if。

现在，每次您要过滤表时，只需调用ticketDataTable.draw()

Answer 2

我找到一种解决方法。 我在ajax请求中放入了新数据。 我在服务器端使用它来执行我的请求。 然后，我每次点击过滤器都会更改数据，然后重新启动请求。

工作正常 ！