SearchPanes

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.

Download

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.

Initialisation

If you include the SearchPanes extension on your page, it is automatically available for every DataTable on that page. You can customise SearchPane's location and configure it through the searchPanes feature and the DataTables layout option.

// Simple initialisation:
new DataTable('#myTable', {
    layout: {
        topStart: 'searchPanes'
    }
});

// Or, with configuration options:
new DataTable('#myTable', {
    layout: {
        topStart: {
            searchPanes: {
                // config options here
            }
        }
    }
});

The simple initialisation will automatically enable 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.

Note that it is also possible to configure SearchPanes through the top level searchPanes option.

Legacy dom option

If you are working with DataTables 1.x code, you might see the dom parameter being used, which uses an ASCII string to define where to put the table control elements. The letter for SearchPanes is P - e.g.:

$('#myTable').DataTable({
    dom: 'Pftip',
    searchPanes:{
        // Your config here...
    },
});

This will still work with DataTables 2 (but not as the same time as layout - they are mutually exclusive), but it is recommended that you update to use layout.

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.

Features

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