Since: SearchPanes SearchPanes 1.0.0

Allow panes to cascade under selection.
Please note - this property requires the SearchPanes extension for DataTables.


As standard, SearchPanes will display all of the options for that column throughout its operation. When searchPanes.cascadePanes is set to true, the panes will remove options which are no longer present in the currently displayed DataTable. The cascade action will occur when a selection or a deselection is made in one of the panes.

This is useful when dealing with large data sets with many different options as they are narrowed down accordingly as selections proceed.

Note: searchPanes.cascadePanes is not supported with searchPanes.preSelect. This is because in order to have the cascade operate as expected the selections need to be made in the correct order. Currently it is not possible to indicate this with preSelect.

Note: searchPanes.cascadePanes is not supported when serverSide and stateSave are used together. While SearchPanes will still operate with this setup, the options shown in the panes will not filter down as expected. This is because SearchPanes would need to make another request for every selection that has been made prior to this, in order to get accurate data. This, for obvious reasons, is not efficient and very messy.

Note: When using columns.searchPanes.combiner along with searchPanes.cascadePanes you must make sure that your data is appropriate for the selection that you make. searchPanes.cascadePanes was developed with the default or logic in mind, using and logic will work in the majority of cases, but may yield some unexpected results when deselecting in a very small amount of cases.

Note: When loading SearchPanes options over ajax, but then not using serverSide processing, neither searchPanes.cascadePanes or searchPanes.viewTotal are supported. This is due to the requirements for users to provide accurate data for the SearchPanes options, whose values change when using these two options. While it is still possible to enable these options, it is not advised and may lead to unexpected behaviour.




By setting the searchPanes.cascadePanes option to true, when a selection is made the options in the other panes which have no values currently being shown in the table hidden.


  • Value: false

The default value for the searchPanes.cascadePanes parameter is false. When this default value is in place no action will be taken to cascade the panes.


Enable cascading panes::

$(document).ready(function() {
        searchPanes: {
            cascadePanes: true
		dom: 'Plfrtip'