Filtering 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 (serverSideDT), 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.typeDT 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 filtering plug-in functions below, you need to include it in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. You must also set the column type for the column(s) that you wish to apply the filter to using columns.typeDT:

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.filter.html.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example').dataTable( {
            "columnDefs": [
                { type: "phoneNumber", targets: 0 }
            ]
        } );
    } );
</script>

Plug-ins

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>

Plug-ins