{hero}

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 属性是包含将显示在面板中的值的 stringcolumns.searchPanes.options.value 的类型为 function

    {
        label: string,
        value: function
    }

默认

  • 值:undefined

的值为 undefinedcolumns.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']]
});

相关

以下选项是直接相关的,并且在您的应用程序开发中也可能有用。