SearchPanes adds panes to the DataTable with the capability to search the DataTable by selecting rows in the panes. This is very useful when it comes to adding a more accessible searching feature and custom search capabilities.

SearchPanes can search DataTables for multiple values that have been selected across multiple panes. They also provide the ability to define custom search functions which cannot be achieved through a simple searchBox.


The easiest way to get and use SearchPanes is to use the DataTables download builder where you can select the software that you wish to use on your page and have a single Javascript and CSS file created and hosted for you. As well as choosing the SearchPanes package, you also have to add the dependent Select package.

Alternatively, the individual files can be included on your page, a release package downloaded or the source control repository cloned on GitHub.


If you include the SearchPanes extension on your page, it is automatically available for every DataTable on that page. You can customise the panes appearance and operation by adding a P to the dom property. This allows the location of the panes to be defined. Configuration for the SearchPanes goes inside of the searchPanes property.

// Simple Initialisation
$('#myTable').DataTable( {
    dom: 'Pfrtip'
} );

// Initialisation with Config
$('#myTable').DataTable( {
        // Your Config Here
    dom: 'Pfrtip'

The simple initialisation will automatically enable the SearchPanes on your table. Some of the customisation options include, cascading panes, viewing subtotals and custom search functions. Please refer to the reference documentation for full details of the options available.

Server Side Processing

As of SearchPanes 1.1 Server Side Processing is supported (serverSide). This will work automatically with the Editor libraries which are free and open source. If you want to implement this yourself, you can do so with the information provided in the server-side processing manual page. For more information on how to set up the Editor Libraries without Editor take a look at this blog post which explains how to do so.


SearchPanes adds the following features:

  • More searching functionality
  • Searching across multiple panes at once
  • Custom searching functions as options
  • Cascading Panes
  • Subtotal views
  • Fully internationalisable
  • Full integration with Bootstrap, Foundation and the other styling libraries supported by DataTables