trex trex - 1 year ago 82
Javascript Question

How to highlight words in datatables on pagination event

I need to highlight multiple words inside datatables

Currently, my script highlights words on the first page of the table.
Words on the second page are not highlighted when you go to that page first time. But they are highlighted if you go to another page and then get back to the second page once again. And so on. I know, the words on the second page are not highlighted first time because the pagination event callback function called asynchronously. How to highlight words from the

array on the pagination event?

$(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');

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

Here is full code example:

Answer Source

mark.js is a text highlighter compatible with DataTables. Have a look at these two examples:

Usage is as simple as:

$(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());
    // Get keyword
    var keyword =;
    // Remove previous marks
    // Mark the new search keyword



You can also keep track on this issue regarding a DataTables plugin for mark.js.