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
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:
$(document).ready(function() {
$('#example').DataTable({
dom: 'Plfrtip',
columnDefs: [
{
dtOpts: {
searching: false,
info: true
},
targets[2]
}
}
});
});
Hide count for the 5th columns pane::
$(document).ready(function() {
$('#example').DataTable({
dom: 'Plfrtip',
columnDefs: [
{
searchPanes: {
viewCount: false
}
targets: [4]
}
]
});
});
Define custom Options for a specific pane:
$(document).ready(function() {
var dt = $('#example').DataTable({
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';
}
}
]
},
targets: [3]
}
]
});
Pre-Select Values in a Pane:
$(document).ready(function() {
$('#example').DataTable({
dom: 'Plfrtip',
columnDefs: [
{
searchPanes: {
preSelect: ['Edinburgh','London']
},
targets: [3]
}
]
});
});
Force panes to hide and show:
$(document).ready(function() {
$('#example').DataTable({
dom: 'Plfrtip',
columnDefs: [
{
searchPanes: {
show: true
},
targets: [0]
},
{
searchPanes: {
show: false
},
targets: [2]
}
]
});
});
Change the threshold of the uniqueness ratio for a specific column:
$(document).ready(function() {
$('#example').DataTable({
dom: 'Plfrtip',
columnDefs: [
{
searchPanes: {
threshold: 0.99
},
targets: [0]
}
]
});
});
Related
The following options are directly related and may also be useful in your application development.