Jquery DataTable对单个列进行多次过滤不起作用答案

【问题标题】：Jquery DataTable multiple filtrering on a single column doesn't workJquery DataTable对单个列进行多次过滤不起作用
【发布时间】：2016-03-22 08:13:02
【问题描述】：

我像这样在我的 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”），它就不起作用。

【问题讨论】：

您必须创建一个自定义过滤器并使用它进行相应的过滤。检查此datatables.net/examples/plug-ins/range_filtering.html，如果您需要更多帮助，请告诉我
是的，但我不想在数字列上过滤，而是在文本/字符串列上过滤。
这只是一个例子。您必须相应地更改您的逻辑..该函数还将为每一行运行，因此 return true 将使该行可见 return false 将删除它..您需要编写一个逻辑来说明列值是否为 this 或 that 或那..根据您的多项选择，然后相应地返回真或假
我这样做了，但是当我调用 ticketDataTable.draw() 时，什么都没有！是参数 serverside = true 吗？
天啊！！没有看到该代码...服务器端确实很复杂..所以请告诉我您是否只想过滤 UI 上可用的数据，或者它也考虑服务器数据？？

标签： javascript jquery datatable datatables

【解决方案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()

【讨论】：

ticketDataTable.context[0].bAjaxDataGet = false;不起作用，什么也没发生
@DyM 如果您只获取一次数据，然后只想对这些数据进行排序、过滤和填充，您始终可以通过 ajax 从服务器获取数据并存储在某个变量中，然后提供这个变量数据到数据表。所以你的数据表必须使用本地数据而不是服务器数据。
stackoverflow.com/questions/9669812/…

【解决方案2】：

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

工作正常！

【讨论】：