如何使highlight.js在一个页面中的多个数据表中工作

How to make highlight.js work in several dataTables in one page?

本文关键字：工作 数据表 一个 highlight 何使 js      更新时间：2023-09-26

到目前为止，highlight.js可以很好地突出显示您在Datatable中寻找的文本。但是，如果我在同一个页面中使用多个dataTable, highlight.js只对第一个dataTable有效。

我的三个表是这样的(总结):

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() );
    
} );

并且，根据这个答案，我在代码下面使用以下代码:

$("table.display").highlight($("#searchBox").val());

我试着找出#searchBox id来自哪里，没有运气。我既没有在datatable .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());
相关文章：