ページテーブルイベントでデータテーブル内の単語を強調表示する方法

Question

データシートhttps://datatables.net/の複数の単語を強調表示する必要があります。

現在、私のスクリプトは表の最初のページにある単語を強調表示しています。
2ページ目の単語は、最初にそのページに移動すると強調表示されません。しかし、あなたが別のページに行って再び2ページ目に戻ると、それらは強調表示されます。等々。

私は、ページングイベントコールバック関数が非同期に呼び出されたため、2ページ目の単語が初めて強調表示されることはありません。

ページ分割イベントでhilitWrdArray[]配列の単語を強調表示するにはどうすればよいですか？ここで

$(document).ready(function() { 

    var table = $('#example').DataTable({ 
     searchHighlight: true 
    }); 

    new $.fn.dataTable.FixedHeader(table, { 
     alwaysCloneTop: true 
    }); 

    var hilitWrdArray = ["junior", "software", "chief", "regional", "specialist"]; 

    var myHilitor = new Hilitor('#example'); 
    myHilitor.apply(hilitWrdArray.join()); 

    $('#example').on('page.dt', function() { 
     myHilitor.apply(hilitWrdArray.join()); 
    }.bind(null, myHilitor, hilitWrdArray)); 
}); 

完全なコード例です：役に立つ場合 http://jsfiddle.net/sergibondarenko/emp5gp6o/12/

Answer 1

更新jsのフィドルはあなたのためにこれを試してみてください。 //jsfiddle.net/emp5gp6o/14/

Answer 2

mark.jsは、DataTablesと互換性のあるテキストハイライトです。この2つの例を見てみましょう：

• https://jsfiddle.net/julmot/buh9h2r8/
• https://jsfiddle.net/julmot/c2am6zfr/

使い方は同じくらい簡単です：これは、テーブルの上にmark.jsを初期化し

$(function() { 

    // Initialize DataTables 
    var table = $('.datatables-table').DataTable({}); 

    // Initialize mark.js on table "draw" (search) 
    table.on('draw', function() { 

    // Get context 
    var tableContent = $(table.table().body()); 
    // Specify keyword 
    var keyword = ["junior", "software", "chief", "regional", "specialist"]; 
    // Remove previous marks 
    tableContent.unmark(); 
    // Mark the new search keyword 
    tableContent.mark(keyword); 

    }); 

}); 

"ドロー"、そのページ区切りイベントが含まれます。

mark.js用のDataTablesプラグインについては、this issueを追跡することもできます。