jQuery DataTable - 以预期的方式隐藏行
Posted
技术标签:
【中文标题】jQuery DataTable - 以预期的方式隐藏行【英文标题】:jQuery DataTable - Hide rows the intended way 【发布时间】:2013-06-25 04:37:01 【问题描述】:我们目前正在开发基于网络的 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 = 所有数据表行,取自“$(SomeDatatable).dataTable().fnGetNodes();” $('table.sortable') = 所有数据表现在,系好安全带(法国班轮)。当您隐式隐藏一行时,dataTable 仍然计算它。 这是惊人的结果。
说到这里,主要的问题是: 我应该如何告诉 dataTable 我想隐藏行而不永远删除它们? DataTable 已经有一个过滤器框,但我需要它与类型过滤器框(不在图像中)一起独立工作。
有没有办法添加第二个过滤器?
【问题讨论】:
我无法回答你,但你肯定会从我那里得到一个非常详细和解释的问题的投票! 我不熟悉 table jquery 插件,但您是否考虑过让这个额外的过滤器创建一个临时的“克隆”原始文件减去不应该显示的行并改为显示它?在我看来,隐藏线仍将被计算在内,因为它们仍在 DOM 中 【参考方案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()
的优点是它可以同时工作,因此用户仍然可以使用右上角的过滤框(默认情况下,我看到你的在右下角)来进一步过滤你的结果选择向他们展示。换句话说,假设您隐藏了所有“已完成”的项目,因此用户只能在表格中看到“不完整”的项目。然后他们仍然可以过滤表中的“笔记本电脑”,并且只查看既不完整且描述中包含“笔记本电脑”的行
【讨论】:
这是一个多么完整的答案。我刚刚完成了对您提供的代码的修改,它就像一个魅力。先生,您是我今天的英雄。谢谢! 很高兴您发现它有帮助,感谢您提出如此详细的问题。重温;) 是否可以仅将此类过滤器附加到特定表? 我相信 1.10 会是这样。不幸的是,在早期版本 1.9.4 和之前的版本中,过滤函数存在于“静态”数组中,并且由当前在 DOM 中活动的所有 DataTable 共享。这就是检查表上的特定类是否应用过滤的原因。 @BLSully - 还有另一种方法可以将自定义过滤器应用于特定表吗?从我收集到的信息来看,今天也是这样【参考方案2】:DataTables 开箱即用:DataTables individual column filtering example 或者,更好的是DataTables individual column filtering example (using select menus)
【讨论】:
【参考方案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();
如果您尝试其中一种方法,您可能会很幸运并绕过数据表问题,但无论哪种方式,我相信您的代码会更有效。
【讨论】:
不幸的是,我不会再使用这个选择器了。但我肯定会从现在开始使用这种方法。 +1 关注和分享!以上是关于jQuery DataTable - 以预期的方式隐藏行的主要内容,如果未能解决你的问题,请参考以下文章
使用 jquery Datatable 插入新行时禁用/防止搜索回调