32

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

我们对应用程序中的几乎每个可排序表都使用DataTable jQuery 插件。这是活动事件的列表。

公开事件

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

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

为此，每一行都有一个表示事件类型的 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 已经有一个过滤器框，但我需要它与类型过滤器框（不在图像中）一起独立工作。

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

4

3 回答 3

23

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

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

于 2013-06-27T15:40:52.723 回答
2

DataTables 开箱即用：DataTables 单独列过滤示例 ，或者更好的是DataTables 单独列过滤示例（使用选择菜单）

于 2013-06-27T15:40:47.150 回答
2

我无法帮助处理数据表部分，因为我从未使用过它，但是您可以改进当过滤器框更改为时运行的 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();

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

于 2013-06-27T15:54:22.920 回答