jQuery DataTable-按预期方式隐藏行

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

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

如您所见,第三列表示事件的类型(票据、变更请求、服务请求等)

用户请求在上一个表顶部放置一个筛选器框,以筛选事件类型。例如,如果选择“仅票证”,则其他所有类型都将隐藏。到目前为止,一切正常

为此,每一行都有一个CSS类来表示事件类型

  • 第1行:class=“票证”
  • 第2行:class=“变更请求”

当筛选器框值更改时,将执行以下javascript代码

$('table.sortable')。每个(函数(){
对于(变量i=0;i<rows.length;i++){
if($(行[i]).hasClass(vClass))$(行[i]).hide();
}
});

在哪里

  • vClass=表示事件类型的CSS类
  • rows=所有数据表行,从“$(SomeDatatable).dataTable().fnGetNodes();”获取
  • $(’table.sortable’)=所有数据表

现在,系好安全带(法国班轮)。隐式隐藏行时,dataTable仍会对其进行计数。
这是令人难以置信的结果

既然如此,主要问题就来了:
我应该如何告诉dataTable我想隐藏行而不永远删除它们?DataTable已经有一个筛选器框,但我需要它和类型筛选器框一起独立工作(不在图像中)

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

您需要为该表编写一个自定义筛选器。例如:

$.fn.dataTableExt.afnFiltering.push(函数(oSettings、aData、iDataIndex){
if($(oSettings.nTable).hasClass('do-exclude-filtering')){
return aData[16]=''| |$('#chkShowExcluded')。是(':checked');
}否则返回true;
});

在该示例中,我们将动态地向表中添加和删除“do exclude filtering”类,如果它有该类,它将检查每一行,以查看给定单元格是否有值。逻辑可以是任何你能想到的东西,只要保持快速就行(这对页面上的每一行、每一画、每一张表都执行)(注意,它被添加到DT中的“全局”数组中,而不是单个实例)

Returntrue包含行,Returnfalse隐藏行

以下是使用AFNFilter功能的datatable参考:http://datatables.net/development/filtering

这样做而不是使用.fnFilter()的优点是,它可以与一起工作,因此用户仍然可以使用右上角的过滤框(默认情况下,我看到您的过滤框位于右下角)若要进一步筛选结果,请选择显示结果。换句话说,假设您隐藏了所有“已完成”项,因此用户只能在表中看到“未完成”项。然后,他们仍然可以筛选表中的“laptop”项,并仅查看其描述中既不完整又有“laptop”项的行

发表评论