Search

This example demonstrates the searchPanes.viewTotal option. This option allows the table to display how many values are being displayed, in relation to the total number of values in the table. searchPanes.i18n.count - this is the format of the count column when no filters have been applied to the table. searchPanes.i18n.countFiltered - this is the format of the count column when filters have been applied to the table. {total} - This is the token which is replaced by the total count of that value in the table. {shown} - This is the token which is replaced by the count of each value where that row is being displayed currently. The default for searchPanes.viewTotal is false.

This example shows how to make use of searchPanes functionality in order to optimise load times by only considering specific columns. By default, all columns are considered, and if your table is wide with a large number of columns this can take a considerable time.

This example shows how to set up the panes so that values are pre-selected. Here the Office column is being targeted and told to pre-select 'Edinburgh' and 'London'. This is done by setting the searchPanes.preSelect option to be an array with an object that contains a rows property which indicates which rows are to be selected, and a column property which indicates which pane the selection should be made in.

This example demonstrates the searchPanes.layout option. This option allows you to define how many panes are displayed in one row before a new line is taken. The default is auto which will allow SearchPanes to determine the best fit.

This is the section for showing the key configuration options that are available with SearchPanes. This includes showing sub-totals, cascading the panes, selecting which panes to show or hide and pre-selecting rows to name a few.

This shows how to stop the clear buttons being displayed by setting the searchPanes.clear config option to be false. searchPanes.clear is true by default.

This example shows how to set up the panes so that values are pre-selected, while searchPanes.cascadePanes is enabled. This is not something that was possible before version 2.0.0. Here the Office column is being targeted and told to pre-select 'Edinburgh' and 'London'. This is done by setting the searchPanes.preSelect option to be an array, and then setting the first object within that to contain a rows property, which is an array of strings representing the rows that are to be selected. The column property indicates which pane the selection is to be made in. In the case that the row does not exist when SearchPanes tries to select it, be it because it was never present in the table or searchPanes.cascadePanes has removed it, nothing will be selected and SearchPanes will move to the next pane. It is important therefore to set the preselections in the correct order when using searchPanes.cascadePanes.

This SearchPanes example demonstrates the searchPanes.cascadePanes functionality. This allows the panes to be filtered based on the values selected in the other panes. searchPanes.cascadePanes is false as default.

This is the SearchPanes extension for DataTables. This example shows how SearchPanes can be populated via ajax, while using client-side processing. The SearchPanes options must be defined in the ajax json data for this to happen, otherwise SearchPanes will just extract the data from the table as usual. The structure of the JSON required is documented here under the "Returned Data" heading. It is worth noting that due to the requirements for users to provide accurate data for the SearchPanes options, neither searchPanes.cascadePanes or searchPanes.viewTotal are supported using this setup. While it is still possible to enable these options, it is not advised and may lead to unexpected behaviour.

It can sometimes be useful, particularly with large data sets for performance reasons, to delay the search operation until the end user has set up the search they want and for them to then press a button that will trigger the search, applying it to the DataTables. This example shows the searchBuilder.liveSearch option, which provides exactly that ability. The search won't happen until you press the "Search" button at the bottom of the SearchBuilder interface.

a screenshot and the init code for your DataTable?

by posting your Datatables init code and relevant server

function at Criteria.initSelect [as init] (dataTables.searchBuilder.js:1046:30) at Criteria._clearValue (dataTables.searchBuilder.js:642:80)

maybe an setting in init?). That way, it would

code prior to your initial load. You will need

the following error on init Cannot read properties of

to how api and init are tagged, but I

input fully compatable with init serverSide = true? I know

object. This is the init code: function setupListTable() { console.log('setupListTable');

editor before the Datatables init code so that the