{hero}

columns.searchPanes.options

Since: SearchPanes SearchPanes 1.0.0

Define custom search options.
Please note - this property requires the SearchPanes extension for DataTables.

Description

As standard, SearchPanes will not add any custom options to the panes.

When columns.searchPanes.options.value is a function, this function is used when searching the table. The function recieves the following parameters.

  • rowData - the data from the current row being compared as an array with one element from each column
  • rowIdx - the index of the row currently being compared

The function's context is an API instance of the host DataTable. This means that from within the custom search functions it is possible to call API methods, such as this.rows().data().

The function must return true if that row is to be included in the search results and false if it is not.

This is useful when you want to add an option to search for which isn't a value in the table. For example, "Countries in Europe", or, "Cities which aren't Edinburgh", or age ranges.

Type

array

Description:

The columns.searchPanes.options array takes objects in the following form. The columns.searchPanes.options.label property is a string that holds the value that will be displayed in the pane. The columns.searchPanes.options.value is of type function.

    {
        label: string,
        value: function
    }

Default

  • Value: undefined

The default value of columns.searchPanes.options is undefined. If there are no custom options defined then none will be added to the panes.

Example

Define custom Options for a specific pane:

$(document).ready(function() {
    var dt = $('#example').DataTable({
        searchPanes: {
            viewTotal: true,
            columns: [0, 3, 4]
        },
        dom: 'Plfrtip',
        columnDefs: [ 
            {
                searchPanes: {
                    options: [
                        {
                            label: 'Under 20',
                            value: function(rowData, rowIdx) {
                                return rowData[4] < 20;
                            }
                        },
                        {
                            label: '20 to 30',
                            value: function(rowData, rowIdx) {
                                return rowData[4] <= 30 && rowData[4] >=20;
                            }
                        },
                         {
                            label: '30 to 40',
                            value: function(rowData, rowIdx) {
                                return rowData[4] <= 40 && rowData[4] >=30;
                            }
                        },
                         {
                            label: '40 to 50',
                            value: function(rowData, rowIdx) {
                                return rowData[4] <= 50 && rowData[4] >=40;
                            }
                        },
                         {
                            label: '50 to 60',
                            value: function(rowData, rowIdx) {
                                return rowData[4] <= 60 && rowData[4] >=50;
                            }
                        },
                         {
                            label: 'Over 60',
                            value: function(rowData, rowIdx) {
                                return rowData[4] > 60;
                            }
                        }
                    ]
                },
                targets: [4]
            },
            {
                searchPanes: {
                    options: [
                        {
                            label: 'Not Edinburgh',
                            value: function(rowData, rowIdx) {
                                return rowData[3] !== 'Edinburgh';
                            }
                        },
                        {
                            label: 'Not London',
                            value: function(rowData, rowIdx) {
                                return rowData[3] !== 'London';
                            }
                        }
                    ],
                    combiner: 'and'
                },
                targets: [3]
            }
        ],
        select: {
			style:    'os',
			selector: 'td:first-child'
		},
		order: [[ 1, 'asc' ]]
    });
});

Related

The following options are directly related and may also be useful in your application development.