到目前为止highlight.js可以很好地突出显示您在数据表中查找的文本。但是,如果我在同一页面中使用多个数据表,则highlight.js仅适用于第一个数据表。
我的三个表看起来像这样(总结):
1:
<table class="table table-hover display" id="table_m">
<thead>
<tr>
2:
<table class="table table-hover display" id="table_r">
<thead>
<tr>
3:
<table class="table table-hover display" id="table_a">
<thead>
<tr>
下面是激活一页中三个数据表的 jQuery 代码:
var table = $('table.display').DataTable();
table.on( 'draw', function () {
var body = $( table.table().body() );
body.unhighlight();
body.highlight( table.search() );
} );
并且,根据此 answer我在该代码下面使用以下内容:
$("table.display").highlight($("#searchBox").val());
我试图找出 #searchBox id 的来源,但没有成功。我在dataTables.js 和highlight.js 中都没有找到它。我什至注意到,在没有该 id 的情况下,突出显示仍然有效(但仅适用于第一个表):
$("table.display").highlight();
如何让突出显示在三个表中起作用?如何指定不同数据表的搜索输入的 ID?有什么想法吗?
最佳答案
在您提供的答案中,#searchBox
仅提供正在搜索的数据的句柄。将 $("#searchBox").val()
替换为对您要突出显示的数据 block 的引用。
换句话说,如果您想在表中突出显示单词 foo
,并且您有一个 id 为 #myInput
的文本输入,其中包含值 foo
,将 $("#searchBox").val()
替换为 $("#myInput").val()
。
或者,您可以像这样对值进行硬编码:
$("table.display").highlight("foo");
如果您有 3 个不同的搜索输入(每个表一个),请确保为每个输入提供唯一的 ID,并尝试分别对每个表调用 highlight()
:
$("#table_m").highlight($("#searchBox_m").val());
$("#table_r").highlight($("#searchBox_r").val());
$("#table_a").highlight($("#searchBox_a").val());
关于javascript - 如何让highlight.js在一个页面的多个数据表中工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31611722/