jQuery DataTable - 隐藏行的正确方式

Question

jQuery DataTable - 隐藏行的正确方式

javascriptjquerydatatables

32

我们目前正在开发一个基于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 = 所有的dataTable行，从"$(SomeDatatable).dataTable().fnGetNodes();"获取
$('table.sortable') = 所有dataTables

现在，请系好你的安全带（法国邮轮）。当您隐式隐藏一行时，dataTable仍然会将其计算在内。这是一个绝妙的结果。

Datatable on drugs

说完了这个，下面是主要问题：

我该如何告诉dataTable我想要隐藏行而不是永久删除它们？dataTable已经有一个筛选框，但我需要它独立工作，与类型筛选框（不在图片中）一起使用。

是否有办法添加第二个筛选器呢？

- Érik Desjardins

1

我无法回答你的问题，但你肯定会得到我的投票，因为你提出了一个非常详细和清晰的问题！ - Liath

我不熟悉table jQuery插件，但你是否考虑过创建原始表格的临时“克隆”来代替这个额外的筛选器，减去不应该显示的行并显示它呢？在我看来，隐藏的行仍然会被计算，因为它们仍然存在于DOM中。 - Eyal Alsheich

3个回答

2

我无法帮助您处理datatable部分，因为我从未使用过它，但是当筛选框发生变化时，您可以改进运行的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();

如果您尝试使用这些替代方法，可能会有幸避免datatable问题，但无论如何，我相信您的代码将更加高效。

- lukenofurther

很遗憾，我将不再使用这个选择器。但是从现在开始，我一定会使用这个方法。感谢你的注意并分享！ - Érik Desjardins

2

DataTables可以直接提供此功能：DataTables单列过滤示例或更好的DataTables单列过滤示例（使用下拉菜单）

- Majid Fouladpour

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BLSully · Accepted Answer

你需要为那个表编写自定义筛选器。示例：

$.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以隐藏该行

以下是Datatable参考资料，使用afnFiltering功能：http://datatables.net/development/filtering

与使用.fnFilter()相比，这样做的优点是它可以与之同时使用，因此用户仍然可以使用右上角的过滤框（默认情况下，我看到您的过滤框在右下方）进一步筛选您选择向其显示的结果。换句话说，假设您隐藏了所有“已完成”的项目，因此用户只在表格中看到“未完成”的项目。然后，他们仍然可以过滤出“笔记本电脑”并且只看到两者都是“未完成”且其描述中有“笔记本电脑”的行。