columns.searchPanes.options
自 SearchPanes 1.0.0 起
定义自定义搜索选项。
请注意 - 此属性需要 SearchPanes(用于 DataTables 的扩展)。
说明
标准情况下,SearchPanes 不会向面板中添加任何自定义选项。
当 columns.searchPanes.options.value
是一个函数时,此函数会在搜索表中使用。此函数接收以下参数。
rowData
- 正在比较的当前行中具有每一列中一个元素的数据(格式为数组)rowIdx
- 当前正在比较的行
此函数的上下文是主机 DataTable 的 API 实例。这意味着从自定义搜索函数中可以调用 API 方法,例如 this.rows().data()
。
此函数必须返回 true
(如果要将该行包括在搜索结果中)或 false
(如果不包括)。
此功能在您要添加一个搜索选项时会很有用,该选项不是表中的一个值。例如,“欧洲国家”或“不是爱丁堡的城市”或年龄范围。
类型
数组
- 说明
包含以下形式对象的
columns.searchPanes.options
数组。columns.searchPanes.options.label
属性是包含将显示在面板中的值的string
。columns.searchPanes.options.value
的类型为function
。{ label: string, value: function }
默认
- 值:
undefined
的值为 undefined
。columns.searchPanes.options
的默认值是 undefined。如果没有定义自定义选项,则不会向面板中添加任何自定义选项。
示例
定义特定面板的自定义选项
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']]
});
相关
以下选项是直接相关的,并且在您的应用程序开发中也可能有用。