我们目前正在开发基于网络的CRM。除了令人沮丧的问题外,该项目进展顺利。
我们在应用程序中几乎每个可排序表都使用DataTable jQuery plug-in。以下是活动事件列表。
如您所见,第三列代表事件的类型(故障单,变更请求,服务请求等)
用户请求在上一个表格顶部放置一个过滤器框,以过滤事件类型。例如,如果选择“仅限票证”,则将隐藏其他所有类型。到目前为止,一切正常。
为了做到这一点,每一行都有一个代表事件类型的CSS类。
当过滤器框值更改时,将执行以下javascript代码
$('table.sortable').each(function() {
for (var i = 0; i < rows.length; i++) {
if ($(rows[i]).hasClass(vClass)) $(rows[i]).hide();
}
});
其中
现在,系好安全带(法国班轮)。当您隐式隐藏行时,dataTable仍会对其进行计数。 这是令人难以置信的结果。
正如所解释的那样,主要问题是: 我怎么能告诉dataTable我想隐藏行而不永远删除它们? DataTable已经有一个过滤器框,但是我需要它与类型过滤器盒一起独立工作(不在图像中)。
是否可以添加第二个过滤器?
答案 0 :(得分:22)
您需要为该表编写自定义过滤器。例如:
$.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;项目,因此用户只能看到“不完整”的内容。表中的项目。然后,他们仍然可以过滤笔记本电脑的表格。并且只查看完全不完整的行并且有“笔记本电脑”。在他们的描述中
答案 1 :(得分:2)
DataTables开箱即用:DataTables individual column filtering example 或者,更好的是DataTables individual column filtering example (using select menus)
答案 2 :(得分:2)
我无法帮助使用数据表部分,因为我从未使用它,但您可以改进过滤器框更改为时运行的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();
如果您尝试使用其中一种方法,那么您可能会很幸运并避开数据表问题,但无论哪种方式,我相信您的代码都会更有效。