Search plug-ins

DataTables provides two different search plug-in APIs, creating a very powerful and flexible system that will provide logic for almost any search criterion you wish, based on user input.

DataTables supports two different kinds of plug-in search methods:

Type based search
Row based search

Server-side processing: If you are using server-side processing (serverSide), DataTables doesn't do any client-side searching, so these plug-ins will not have any effect. In server-side processing mode, all data manipulation is done by the server - so you would need to implement whatever search logic you require there.

Type based search

Type based search plug-ins modify the data to be searched upon for each individual cell. A type can be applied to a column using the columns.type option, and can effect both ordering and searching by changing the data to be used.

As an example, a column with formatted telephone numbers in it might benefit from the table user being able to search the table for the number in its formatted state (555-1234) or in its unformatted state (5551234), allowing them more natural search input.

How to use

To make use of the column (type) based searching plug-in functions below, you need to include it in the Javascript available for your page and set the column type for the column(s) that you wish to apply the search to using columns.type.

Browser

Loading a type based search plug-in in the browser is just a case of loading the plug-ins Javascript. As an example, the code below makes use of the phoneNumber plug-in saved into a file:

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.search.html.js"></script>
<script type="text/javascript">
    var table = new DataTable('#myTable', {
        columnDefs: [{ type: 'phoneNumber', target: 0 }],
    });
</script>

Plug-ins which can be included in the browser are available on our CDN. See the details page for each plug-in for the full CDN URL.

ES modules

Search plug-ins are also available as ES modules, which can be loaded from the datatables.net-plugins package (.mjs files). You need to include the file required for the plug-in. Below we use the example of ellipsis again:

import DataTable from 'datatables.net';
import 'datatables.net-plugins/filtering/phoneNumber.mjs';

var table = new DataTable('#myTable', {
    columnDefs: [{ type: 'phoneNumber', target: 0 }],
});

CommonJS

If you are using CommonJS (i.e. in an older version of Node or Webpack), the .js files can be loaded in, and it will automatically add the plug-in to DataTables. As with DataTables core and the extensions, the CommonJS loader provides a function that you need to call with the window and $/jQuery objects - e.g.:

var $ = require('jquery');
var DataTable = require('datatables.net')(window, $);
require('datatables.net-plugins/filtering/phoneNumber.js')(window, $);

Plug-ins


accent-neutralise	Replace accented characters with unaccented counterparts
diacritics-neutralise	Replace accented characters (diacritics) with latin equivalents
html	Strip HTML using DOM methods
phoneNumber	Make phone numbers searchable formatted or unformatted

Row based search

Row based search provides you with complete control over a row - whether it is included in a search result or not based entirely upon your own input and your own search logic. This can be used for complex search operations such as range filters or fuzzy matching.

How to use

To add the functionality provided by the row based search plug-ins below, you simply need to include it in the Javascript available for your page. Include it after you load the DataTables library, but before you initialise the DataTable.

These filters are global and will be applied whenever DataTables applies its own filtering.

In the following example the range filtering plug-in is saved to a file, and used in the DataTable which is initialised. Note also that an event listener is attached to two input's, which will cause the table to redraw, and thus filter the new data:

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.filter.range.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var table = $('#example').DataTable();
         
        /* Add event listeners to the two range filtering inputs */
        $('#min, #max').keyup( function() {
            table.draw();
        } );
    } );
</script>

Row based search plug-ins are not yet available as ES or CommonJS modules. Please get in touch in the forum if you need these modules.

Plug-ins


TableTools.ShowSelectedOnly	Show only selected rows, or all rows, through filtering
range_dates	Filter the table based on two dates in different columns
range_numbers	Filter the data between two numbers (inclusive)