A DataTables plugin for mark.js to highlight search terms in tables
JavaScript HTML
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.



A DataTables plugin for mark.js to highlight search terms in tables

Build Status Greenkeeper npm Version Bower Version License


Getting Started

datatables.mark.js is a plugin to integrate mark.js – a JavaScript keyword highlighter – into DataTables. It detects column specific or global searches and highlights the search term in the table.


Either clone or download this plugin manually, or with npm:

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

Or with Bower using:

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


Alternatively the plugin is also available on the following CDN's:

Because the DataTables CDN only updates plugins at own releases and you can't specify an explicit plugin version, it's recommended to use jsDelivr.


This plugin depends on:

  • DataTables v1.10.6+
  • jQuery v1.7+ (necessary by DataTables)
  • mark.js v6.2+ (the jQuery version)

When using a module loader like CommonJS (e.g. Webpack) or AMD (e.g. RequireJS) they will be loaded automatically.


Finally, you'll have to embed one of these files:

  • datatables.mark.es6.js: Uncompressed ES6
  • datatables.mark.es6.min.js: Compressed ES6 (recommended when using ES6)
  • datatables.mark.js: Uncompressed ES5
  • datatables.mark.min.js: Compressed ES5 (recommended when using ES5)

into your application, by either referencing the file manually using e.g.:

<script src="vendor/datatables.mark.js/dist/datatables.mark.js"></script>

or loading it with AMD or CommonJS.

When using RequireJS you should configure the names of dependent modules as following:

  • jQuery must be named "jquery"
  • DataTables must be named "datatables.net" (defined by DataTables itself)
  • mark.js must be named "markjs"

This is important as datatables.mark.js will load these modules as dependencies. You might have a look at this example.



Activation in the DataTables options:

    mark: true

Activation by default for all DataTables instances:

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

Activation with custom mark.js options:

    mark: {
        // ... custom option properties, e.g.
        // className: "highlight"

Please head over to the mark.js website for an overview of possible options.


Now that you've activated the plugin you just need to define your custom styles for the highlighted elements. If you haven't defined a custom element or className in the mark.js options the default element will be mark without having a class assigned. If you don't want to have custom styles, you can embed one of the default CSS files:


See the contribution guidelines.


Changes are documented in release descriptions.

Happy hacking!