我正在尝试更改 DataTables 搜索的默认行为,但没有成功。
我正在使用插件 mark.js 和 datatables.mark.js plugin -Github (我目前使用的是 DataTables 1.10.12)。
我只想突出显示结果行,而不是删除所有不匹配的行。
我注意到在函数 _fnDraw 中它获取包含匹配项的数组。
所以我尝试像这样更改该部分:
function _fnDraw( oSettings )
{
/* I just changed the following lines */
// var aiDisplay = oSettings.aiDisplay;
var aiDisplay = oSettings.aiDisplayMaster;
我还注意到 fnDisplayEnd 函数用于设置需要打印的行数的限制。
"fnDisplayEnd": function ()
{
var
/* I just changed the following lines */
//records = this.aiDisplay.length,
records = this.aiDisplayMaster.length,
但是这样做代码在另一点上出现了问题:
_api_register( 'rows().nodes()', function () {
return this.iterator( 'row', function ( settings, row ) {
return settings.aoData[ row ].nTr || undefined;
}, 1 );
} );
出现以下错误: 未捕获类型错误:无法读取未定义的属性“nTr”
其中行包含从搜索中获得的匹配项
我丢失了一些东西,但我不知道在哪里。
最佳答案
我将它们包装到 _fnDraw 内的代码行
body.children().detach();
body.append( $(anRows) );
结果:
if(oSettings.aiDisplay.length == oSettings.aiDisplayMaster.length){
body.children().detach();
body.append( $(anRows) );
}
因为oSettings.aiDisplay包含与搜索匹配的行数组,并且oSettings.aiDisplayMaster包含整个表格行。
更新
为了实现这一点,我还隐藏了默认搜索:
dataTables_filter {
display:none;
}
然后让 mark.js 处理这些脏东西,创建一个新的输入字段:
HTML:
<input id="markJsSearch" type="search" placeholder="New Custom Search">
JS:
$input.on("input", function() {
var searchVal = this.value;
$content.unmark({
done: function() {
$content.mark(searchVal, {
separateWordSearch: true,
done: function() {
$results = $content.find("mark");
currentIndex = 0;
jumpTo();
}
});
}
});
});
引用:Fiddle
然后我修改了 markjs 插件(mark.js v8.11.1 - 不是 min),以便向 tr 添加 CSS 类,以突出显示它:
第 727 行:[key 内:'wrapRangeInTextNode']
jQuery(node).parents('tr').addClass('highlight');
第 991 行 [键内:'取消标记']
jQuery(node).parents('tr').removeClass('highlight');
我添加了以下 CSS:
table tbody tr.highlight td {
background: #4e98fe;
color: #fff;
}
并隐藏 mark.js 默认样式:
mark {
background: transparent;
color: #fff;
padding: 0;
}
此外,我需要根据特定列的值向过滤行添加多个选择,我发现了这个很棒的插件,它的作用就像一个魅力:Yet Another DataTables Column Filter谢谢!
为了使其与 mark.js 技巧一起工作(基本上不会重绘表格),我添加了一个名为 multiSearch 的全局变量,如果多重选择被触发,它会让表格重绘。
我创建了:
var multiSearch = true;
我像这样更改了 DataTables 插件:
if((oSettings.aiDisplay.length == oSettings.aiDisplayMaster.length && !multiSearch)){
body.children().detach();
body.append( $(anRows) );
} else if(multiSearch) {
body.children().detach();
body.append( $(anRows) );
}
并添加以下内容:
$('body').on('click focus','#markJsSearch',function(){
multiSearch = false;
}).on('blur','#markJsSearch',function(){
multiSearch = true;
});
希望一切都清楚并且可以帮助别人!
关于javascript - 数据表搜索突出显示,不删除 tr,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48811956/