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

Question

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

我们在应用程序中几乎每个可排序表都使用DataTable jQuery plug-in。以下是活动事件列表。

如您所见，第三列代表事件的类型（故障单，变更请求，服务请求等）

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

为了做到这一点，每一行都有一个代表事件类型的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;
});

在该示例中，我们动态添加和删除了“排除过滤”功能。类到表，如果它有类，它会检查每一行以查看给定单元格是否有值。逻辑可以是你可以想象的任何东西，只需保持快速（这是针对每一行，每次抽奖，对于页面上的每个表格执行的（注意它被添加到＆＃39;全局＆＃39; DT中的数组，而不是单个实例）

返回true以包含该行，返回false以隐藏行

以下是使用afnFiltering功能的数据表引用：http://datatables.net/development/filtering

这样做的优势在于，而不是使用.fnFilter()，这可以使用ALONG WITH，因此用户仍然可以使用右上角的过滤框（默认情况下，我看到你的是右下角）来进一步过滤结果你选择显示它们。换句话说，假设你隐藏了所有已完成的＆＃39;项目，因此用户只能看到“不完整”的内容。表中的项目。然后，他们仍然可以过滤笔记本电脑的表格。并且只查看完全不完整的行并且有“笔记本电脑”。在他们的描述中

Answer 2

DataTables开箱即用：DataTables individual column filtering example 或者，更好的是DataTables individual column filtering example (using select menus)

Answer 3

我无法帮助使用数据表部分，因为我从未使用它，但您可以改进过滤器框更改为时运行的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();

如果您尝试使用其中一种方法，那么您可能会很幸运并避开数据表问题，但无论哪种方式，我相信您的代码都会更有效。