javascript - 如何使Highlight.js在一页中的多个数据表中工作？

到目前为止，highlight.js可以很好地突出显示您要在数据表中查找的文本。但是，如果我在同一页面中使用多个dataTable，则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>

这是在一页中激活三个dataTables的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()替换为要突出显示的数据块的引用。

换句话说，如果要突出显示表中的单词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/