columns.searchPanes
自:SearchPanes 1.0.0
各个列选项的容器。
请注意 - 此属性需要 DataTables 的 搜索面板 扩展。
描述
默认情况下,如果 columns.searchPanes
为 undefined
,将不对列的面板应用自定义选项。否则,如果在此对象中定义了相关选项,它们将被应用。
很有用,因为它意味着可以自定义各个列的面板,而不是影响每个面板。
类型
默认
- 值:
undefined
对于 columns.searchPanes
对象的默认值为 undefined
,表示面板将使用所有默认设置。
示例
更改第三列面板的搜索和信息
new DataTable('#myTable', {
layout: {
top1: 'searchPanes'
},
columnDefs: [
{
dtOpts: {
searching: false,
info: true
},
targets: [2]
}
]
});
隐藏第 5 列面板的计数:
new DataTable('#myTable', {
layout: {
top1: 'searchPanes'
},
columnDefs: [
{
searchPanes: {
viewCount: false
},
targets: [4]
}
]
});
为特定面板定义自定义选项
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]
}
]
});
在面板中预先选择值
new DataTable('#myTable', {
layout: {
top1: 'searchPanes'
},
columnDefs: [
{
searchPanes: {
preSelect: ['Edinburgh', 'London']
},
targets: [3]
}
]
});
强制显示和隐藏窗格
new DataTable('#myTable', {
layout: {
top1: 'searchPanes'
},
columnDefs: [
{
searchPanes: {
show: true
},
targets: [0]
},
{
searchPanes: {
show: false
},
targets: [2]
}
]
});
更改特定列的唯一性比率的阈值
new DataTable('#myTable', {
layout: {
top1: 'searchPanes'
},
columnDefs: [
{
searchPanes: {
threshold: 0.99
},
targets: [0]
}
]
});
相关
以下选项直接相关,在应用程序开发中也可能有用。