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

Question

我们目前正在开发基于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 =所有dataTable行,来自"$(SomeDatatable).dataTable().fnGetNodes();"
• $('table.sortable')=所有dataTables

现在,系好安全带(法国班轮).当您隐式隐藏行时,dataTable仍会对其进行计数.这是一个神话般的结果.

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

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

Answer 1

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

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