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

Question

我们目前正在开发基于网络的 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 已经有一个过滤器框，但我需要它与类型过滤器框(不在图像中)一起独立工作。

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

Answer 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() 的优点是它可以一起工作，所以用户仍然可以使用右上角的过滤框(默认情况下，我看到你的是底部右)进一步筛选您选择显示的结果。换句话说，假设您隐藏了所有“已完成”的项目，因此用户只能在表格中看到“未完成”的项目。然后他们仍然可以过滤表中的“笔记本电脑”，只查看不完整且描述中包含“笔记本电脑”的行