jQuery DataTable-以预期方式隐藏行

2021/01/02 13:51 · jquery ·  · 0评论

我们目前正在开发基于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();”获得的所有dataTable行
  • $('table.sortable')=所有数据表

现在,系紧安全带(法语衬垫)。当您隐式隐藏行时,dataTable仍会对其进行计数。这是神话般的结果。

药物数据表

解释了这个问题之后,出现了一个主要问题:我应该如何告诉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”类,如果该类具有该类,它将检查每一行以查看给定单元格是否具有值。逻辑可以是您可以梦dream以求的任何东西,只需使其保持快速状态(对页面上的每一行,每次绘制,每张表都执行此逻辑(请注意,它已添加到DT中的“全局”数组中,而不是单个实例中)

返回true包含行,返回false隐藏行

这是使用afnFiltering功能的数据表参考:http ://datatables.net/development/filtering

代替使用.fnFilter()的好处是,它也可以使用,因此用户仍然可以使用右上角的过滤框(默认情况下,我看到您的右下角)进一步过滤选择显示的结果。换句话说,假设您隐藏了所有“完成”的项目,那么用户只能在表中看到“未完成”的项目。然后,他们仍然可以过滤表格中的“笔记本电脑”,并仅查看描述不全且具有“笔记本电脑”的行

DataTables提供了开箱即用的功能:DataTables单个列过滤示例,
或者更好的是
DataTables单个列过滤示例(使用选择菜单)

我无法使用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();

如果您尝试使用这些方法之一,则可能会很幸运,并且可以规避数据表的问题,但是无论哪种方式,我都相信您的代码会更有效。

本文地址:http://jquery.askforanswer.com/jquery-datatable-yiyuqifangshiyincangxing.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!