columns.searchPanes.options

Since: 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 receives 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:

var dt = new DataTable('#myTable', {
	layout: {
		top1: {
			searchPanes: {
				viewTotal: true,
				columns: [0, 3, 4]
			}
		}
	},
	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']]
});

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

Options

searchPanes.panes