jQuery DataTable - 以预期的方式隐藏行

Posted 2023-05-07

【中文标题】jQuery DataTable - 以预期的方式隐藏行

【英文标题】：jQuery DataTable - Hide rows the intended way

【发布时间】：2013-06-25 04:37:01

【问题描述】：

我们目前正在开发基于网络的 CRM。除了一个令人沮丧的问题之外，该项目进展顺利。

我们对应用程序中的几乎每个可排序表都使用DataTable jQuery plug-in。以下是活动事件列表。

如您所见，第三列代表事件的类型（工单、变更请求、服务请求等）

用户要求在上表顶部放置一个过滤框来过滤事件类型。例如，如果您选择“仅票”，则所有其他类型都将被隐藏。到目前为止，一切正常。

为此，每一行都有一个表示事件类型的 CSS 类。

第 1 行：class="ticket" 第 2 行：class="changeRequest"

当过滤框值发生变化时，执行下面的javascript代码

$('table.sortable').each(function() 
    for (var i = 0; i < rows.length; i++) 
        if ($(rows[i]).hasClass(vClass)) $(rows[i]).hide();
    
);

在哪里

vClass = 代表事件类型的 CSS 类 rows = 所有数据表行，取自“$(SomeDatatable).dataTable().fnGetNodes();” $('table.sortable') = 所有数据表

现在，系好安全带（法国班轮）。当您隐式隐藏一行时，dataTable 仍然计算它。 这是惊人的结果。

说到这里，主要的问题是： 我应该如何告诉 dataTable 我想隐藏行而不永远删除它们？ DataTable 已经有一个过滤器框，但我需要它与类型过滤器框（不在图像中）一起独立工作。

有没有办法添加第二个过滤器？

【问题讨论】：

我无法回答你，但你肯定会从我那里得到一个非常详细和解释的问题的投票！

我不熟悉 table jquery 插件，但您是否考虑过让这个额外的过滤器创建一个临时的“克隆”原始文件减去不应该显示的行并改为显示它？在我看来，隐藏线仍将被计算在内，因为它们仍在 DOM 中

【参考方案1】：

您需要为该表编写一个自定义过滤器。示例：

$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) 
    if ($(oSettings.nTable).hasClass('do-exclude-filtering')) 
        return aData[16] == '' || $('#chkShowExcluded').is(':checked');
     else return true;
);

在该示例中，我们动态地将“do-exclude-filtering”类添加和删除到表中，如果它具有该类，它会检查每一行以查看给定单元格是否具有值。逻辑可以是你能想到的任何东西，只要保持快速（这对每一行、每次绘制、页面上的每个表都执行（注意它被添加到 DT 中的“全局”数组，而不是单个实例）

返回true 包含行，返回false 隐藏行

这里是使用 afnFiltering 功能的数据表参考：http://datatables.net/development/filtering

这样做而不是使用.fnFilter() 的优点是它可以同时工作，因此用户仍然可以使用右上角的过滤框（默认情况下，我看到你的在右下角）来进一步过滤你的结果选择向他们展示。换句话说，假设您隐藏了所有“已完成”的项目，因此用户只能在表格中看到“不完整”的项目。然后他们仍然可以过滤表中的“笔记本电脑”，并且只查看既不完整且描述中包含“笔记本电脑”的行

【讨论】：

这是一个多么完整的答案。我刚刚完成了对您提供的代码的修改，它就像一个魅力。先生，您是我今天的英雄。谢谢！

很高兴您发现它有帮助，感谢您提出如此详细的问题。重温;)

是否可以仅将此类过滤器附加到特定表？

我相信 1.10 会是这样。不幸的是，在早期版本 1.9.4 和之前的版本中，过滤函数存在于“静态”数组中，并且由当前在 DOM 中活动的所有 DataTable 共享。这就是检查表上的特定类是否应用过滤的原因。

@BLSully - 还有另一种方法可以将自定义过滤器应用于特定表吗？从我收集到的信息来看，今天也是这样

【参考方案2】：

DataTables 开箱即用：DataTables individual column filtering example 或者，更好的是DataTables individual column filtering example (using select menus)

【参考方案3】：

我无法帮助处理数据表部分，因为我从未使用过它，但您可以改进过滤框更改为时运行的 javascript：

$('.table-sortable').find('tr.' + vClass).removeClass('hidden').addClass('show');
$('.table-sortable').find('tr:not(.' + vClass + ')').removeClass('hidden').addClass('show');

具有适当的 css 样式。或者你可以这样做：

$('.table-sortable').find('tr.' + vClass).show();
$('.table-sortable').find('tr:not(.' + vClass + ')').hide();

如果您尝试其中一种方法，您可能会很幸运并绕过数据表问题，但无论哪种方式，我相信您的代码会更有效。

【讨论】：

不幸的是，我不会再使用这个选择器了。但我肯定会从现在开始使用这种方法。 +1 关注和分享！