jQuery DataTable - 隐藏行的正确方法

9 浏览
0 Comments

jQuery DataTable - 隐藏行的正确方法

我们目前正在开发一个基于Web的CRM系统。这个项目进行得很顺利，除了一个令人沮丧的问题之外。

我们在应用程序中几乎使用了DataTable jQuery插件来处理所有可排序的表格。下面是一个活动事件的列表。

Open incidents

正如你所看到的，第三列代表了事件的类型（工单、变更请求、服务请求等）。

用户要求在上面的表格中添加一个筛选框来筛选事件的类型。例如，如果你选择“仅工单”，那么其他类型的事件将被隐藏。到目前为止，一切都正常工作。

为了达到这个目的，每一行都有一个表示事件类型的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();"获取的所有dataTable行
  • $('table.sortable') = 所有dataTables

现在，请系好安全带（法国邮轮）。当你隐式隐藏一行时，dataTable仍然会计算它。

以下是令人惊叹的结果。

Datatable on drugs

在解释完这一点之后，主要问题来了：

我应该如何告诉dataTable我想要隐藏行但不永久删除它们？DataTable已经有一个筛选框，但我需要它能够与类型筛选框（不在图片中）独立工作。是否有办法添加一个第二个筛选框呢？

0