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.


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