{hero}

columns.searchPanes

自:SearchPanes 1.0.0

各个列选项的容器。
请注意 - 此属性需要 DataTables 的 搜索面板 扩展。

描述

默认情况下,如果 columns.searchPanesundefined,将不对列的面板应用自定义选项。否则,如果在此对象中定义了相关选项,它们将被应用。

很有用,因为它意味着可以自定义各个列的面板,而不是影响每个面板。

类型

字符串

描述

此选项可以容纳各个面板的所有子选项。

默认

  • 值: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]
		}
	]
});

相关

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