Question

目标：允许用户从<select>下拉列表中选择名称。这些名称存在于DataTables表的列中。如果某行不包含该名称，则会隐藏该行。我不希望使用.search()函数执行此操作，因为我希望能够在筛选的选择中进行搜索。

问题：我的代码似乎没有隐藏行，而是删除了它们 - 这意味着我无法在不刷新页面的情况下执行不同的过滤器。

方法：我已经尝试了以下代码，以及其他代码。这基于some documentation on the DataTables website。我的目标几乎相同，代码也是如此，但我没有达到相同的结果。这是我最接近成功的地方。我正在硬编码，而不是现在从<select>绘图用于测试目的。

// This works fine. All columns that have 'jim' in the names column appear. 
// All others are hidden.
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex )
    {
        if (data[4] == "jim")
        {
            return true;
        }
        return false;
    });

以上工作正常。我只获得名称列中包含'jim'的行。但是，如果我按照以上代码执行以下操作......

    // The result of this block: 0 rows. 
    // There are no rows given when the table clearly has rows containing 'brandon' in the names field.
    $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex )
    {
        if (data[4] == "brandon")
        {
            return true;
        }
        return false;
    });

......我的桌子变空了。这必须是因为我正在执行的过滤器正在删除行而不是隐藏它们。此外，使用table.draw()跟随这两个块中的任何一个/两个似乎都没有任何效果。

其他信息：
版本：

dataTables.tableTools.min.js：2.2.0
dataTables.responsive.min.js：2.1.0
jQuery v3.2.1
jquery.dataTables.min.js：1.10.15
tablesorter.min.js：2.19.1
jquery.tablesorter.widgets.js：2.28.10

在StackOverflow上有一个类似的问题，但唯一的答案是与DataTables文档相关联，但没有给我一个解决方案。

问题：如何根据单元格的内容过滤行？为什么我的行似乎被删除而不是隐藏？

Answer 1

添加两个自定义搜索功能$.fn.dataTable.ext.search数组意味着应满足这两个条件。您指示DataTable显示同一第五列中同时包含jim和brandon的行，这显然会导致空表。

这应该有效：

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex )
    {
        if (data[4] == "jim" || data[4] == "brandon")
        {
            return true;
        }
        return false;
    });
);

使用$.fn.dataTable.ext.search.pop() API方法执行搜索后，您还可以使用draw()删除自定义搜索功能。

替代解决方案是使用column().search()中演示的this example和<select>元素进行过滤。在此示例中，您仍然可以搜索已过滤的结果。这是因为可以同时使用search()和column().search()来达到您想要的效果。

过滤DataTables行似乎会删除它们，而不是隐藏它们

1 个答案: