Usage

Initialisation and configuration of SearchPanes is performed through the searchPane feature for DataTables, which is used in layout. It can be given as a simple string for a particular location, or it can be set as an object to provide more granular control.

Initialising SearchPanes

The SearchPanes extension adds a "feature" to DataTables - that is, a component which can be used in the layout option of DataTables, allowing you to place the search panels around the table as your UI requires.

In its basic form, SearchPanes is initialised with a string defining the feature, which will create a new SearchPanes instance with its default configuration:

new DataTable('#myTable', {
    layout: {
        top: 'searchPanes'
    }
});

Customisation

SearchPanes has a wide range of options that can be used for configuration, to have it exactly fit your needs. To pass in custom configuration properties, gibe the layout position an object that contains a searchPanes key, which itself is an object - i.e.:

new DataTable('#myTable', {
    layout: {
        top: {
            searchPanes: {
                cascadePanes: true,
                threshold: 0.4
            }
        }
    }
});

This will initialise SearchPanes with the searchPanes.threshold option set to 0.4 - lower than the default, so the pane for a column is more likely to be shown. We've also enabled the searchPanes.cascadePanes option, so when you click to select in one column's pane, the other panes will automatically filter down to show only the options remaining.

Column specific configuration

You may encounter a case where you need to set options for a specific column that differ from the global configuration for the table. This can be done with the columns.searchPanes option. This parameter allows the full set of configuration options for SearchPanes, but is applied to the pane for that column only. For example:

new DataTable('#myTable', {
    columnDefs: [{
        target: 4,
            searchPanes: {
                threshold: 0.4
            }
    }],
    layout: {
        top: 'searchPanes'
    }
});

Here the default searchPanes.threshold option will be used for all column, except column index 4 which will have it set to 0.4. Any of the options for a pane can be configured in this way, allowing per column overrides.

Legacy option

Prior to the introduction of the layout option in DataTables, layout was done with the dom option (which continues to be supported in DataTables 2 and 3). That option didn't provide the ability to configure the components it was displaying, so a top-level searchPanes option was used. This also continues to be supported and can be used for the configuration of SearchPanes:

new DataTable('#myTable', {
    searchPanes: {
    
    },
    layout: {
        top: 'SearchPanes'
    }
});

In this case, the feature from top: 'searchPanes' will use the configuration from the searchPanes option. The disadvantage of this is that you can only specify a single configuration. The initial method above is preferred.

Examples

There are a wide ranges of examples available on this site which demonstrate the many features of SearchPanes. Check them out, and if you have any questions, pop over to the forum.