columns.searchPanes
Container for options for individual columns.
Please note - this property requires the SearchPanes extension for DataTables.
Description
As standard, no custom options will be applied to the pane for the column if columns.searchPanes is undefined. Otherwise the related options will be applied if they are defined within this object.
This is useful as it means that the panes for individual columns can be customised rather than affecting every pane.
Type
string
This option is capable of holding all of the sub-options for individual panes.
Default
- Value:
undefined
The default value for the columns.searchPanes object is undefined meaning the pane will use all the default settings.
Examples
Alter searching and info of the third columns pane:
new DataTable('#myTable', {
layout: {
top1: 'searchPanes'
},
columnDefs: [
{
dtOpts: {
searching: false,
info: true
},
targets: [2]
}
]
});Hide count for the 5th columns pane::
new DataTable('#myTable', {
layout: {
top1: 'searchPanes'
},
columnDefs: [
{
searchPanes: {
viewCount: false
},
targets: [4]
}
]
});Define custom Options for a specific pane:
new DataTable('#myTable', {
layout: {
top1: 'searchPanes'
},
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';
}
}
]
},
targets: [3]
}
]
});Pre-Select Values in a Pane:
new DataTable('#myTable', {
layout: {
top1: 'searchPanes'
},
columnDefs: [
{
searchPanes: {
preSelect: ['Edinburgh', 'London']
},
targets: [3]
}
]
});Force panes to hide and show:
new DataTable('#myTable', {
layout: {
top1: 'searchPanes'
},
columnDefs: [
{
searchPanes: {
show: true
},
targets: [0]
},
{
searchPanes: {
show: false
},
targets: [2]
}
]
});Change the threshold of the uniqueness ratio for a specific column:
new DataTable('#myTable', {
layout: {
top1: 'searchPanes'
},
columnDefs: [
{
searchPanes: {
threshold: 0.99
},
targets: [0]
}
]
});Related
The following options are directly related and may also be useful in your application development.