datatables.mark.js

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

Examples

• DataTables global search highlighting
• DataTables column search highlighting

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.

Download

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

CDN

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

• jsDelivr
• DataTables CDN listed under plugins -> features. For example the links for DataTables v1.10.13 can be found here

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.

Dependencies

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.

Integration

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.

Usage

Activation

Activation in the DataTables options:

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

Activation by default for all DataTables instances:

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

Activation with custom mark.js options:

$(".myTable").DataTable({
    mark: {
        // ... custom option properties, e.g.
        // className: "highlight"
    }
});

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

Styling

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:

• datatables.mark.css
• datatables.mark.min.css

Contributing

See the contribution guidelines.

Changelog

Changes are documented in release descriptions.

Happy hacking!