Search highlighting with mark.js

If you're googling for DataTables or any other keyword you'll notice that the search keyword will be highlighted in the description of each result as shown in the image below.

This behaviour allows users to find what they're searching for more faster and therefore leads to a better usability.

DataTables itself offers a search feature that filters a table to only show relevant rows. But it doesn't offer built-in keyword highlighting within these results. If you'd like to improve the usability for your users too, keep on reading.

Introducing datatables.mark.js

This is where datatables.mark.js comes in, a plug-in that integrates mark.js into DataTables. mark.js is a keyword highlighter for strings, arrays or regular expressions and works in any context (not just tables). datatables.mark.js connects mark.js and DataTables, by offering a plugin for it that can be activated with just one single line of code.

As datatables.mark.js uses mark.js behind the scenes, it allows you to use all of its options, e.g. diacritics to map e.g. ü with u and many more.

Sounds interesting? Let's get started.

Here's an example of what it will produce:

Integrating datatables.mark.js

Prerequisite: A working DataTables table! The above example uses a Bootstrap styled DataTable, but that's not essential.

JavaScript

The first thing we need to do is to embed the necessary JavaScript files into our application. We need to embed mark.js v6.2+ (the jQuery version) and datatables.mark.js. jQuery and DataTables v1.10.6+ must of course also be included.

There are several ways to install mark.js and datatables.mark.js and you can pick one of the following that suits you. Please note that you'll have to embed the files into your HTML file, e.g. using <script> or a module loader like RequireJS.

Bower

$ bower install mark.js --save-dev
$ bower install datatables.mark.js --save-dev

NPM

$ npm install julmot/mark.js --save-dev
$ npm install julmot/datatables.mark.js --save-dev

jsDelivr CDN

DataTables CDN

Note: You may need to update the version 1.10.13 of your installed DataTable version.

CSS

datatables.mark.js just creates <mark> elements in your table (this can be changed to a different element, see below) that indicate a matched word. So the only thing that may needs some styling is this element. By default browsers already give it some style, but you can customise it. For a consistent behaviour across all browsers you can use e.g. one of the following files:

Activating datatables.mark.js

Now that all files are included we can go ahead and activate keyword highlighting for our DataTable table. To do this for a single DataTable instance we need to set the mark option to true:

$(".myTable").DataTable({
    mark: true
});

To active keyword highlighting for all DataTables instances we need to add the mark option to the DataTable defaults:

$.extend(true, $.fn.dataTable.defaults, {
    mark: true
});

Fantastic! Now, every time you enter something into the search input the current search keyword will be highlighted:

Note: datatables.mark.js also supports global or column specific searches via the DataTables API, e.g. table.column(0).search("Lond").draw() (column specific search) or table.search("Lon").draw() (global search).

Adding custom mark.js options

As mentioned datatables.mark.js uses mark.js behind the scenes. To customise it, you can use its options. For example if you'd like to wrap matches with a <span class="highlight"></span> element instead of <mark> (default) you can use the following:

$('.myTable').DataTable({
    mark: {
        element: 'span',
        className: 'highlight'
    }
});

This of course works for the activation via the DataTables defaults too (see above).

Another example would be diacritics option. DataTables offers a plug-in to neutralise accents while searching. To also neutralise accents in the keyword highlighting process mark.js offers a diacritics option, that is activated by default. To disable it you can use e.g.:

$('.myTable').DataTable({
    mark: {
        diacritics: false
    }
});

For a full list of options please visit mark.js.

Conclusion

This article gave you an insight on how to add search keyword highlighting into DataTables with mark.js. datatables.mark.js and mark.js are cross-browser, unit-tested, written in ES6, maintained and open for feature requests.