gpt4 book ai didi

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

转载 作者:IT王子 更新时间:2023-10-29 03:20:45 26 4
gpt4 key购买 nike

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

我们正在使用 DataTable jQuery plug-in对于应用程序中的几乎所有可排序 表。这是事件事件的列表。

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();”
  • $('table.sortable') = 所有数据表

现在,请系好安全带(法国类轮)。当您隐式隐藏一行时,dataTable 仍会对其进行计数。这是惊人的结果。

Datatable on drugs

解释完毕,主要问题是:我应该如何告诉 dataTable 我想隐藏行而不永远删除它们? DataTable 已经有一个过滤器框,但我需要它与类型过滤器框(不在图像中)一起独立工作。

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

最佳答案

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

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

关于javascript - jQuery DataTable - 以预期的方式隐藏行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17347179/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com