columns.searchPanes

自：SearchPanes 1.0.0 起

個別欄位選項的容器。
請注意 - 此屬性需要 DataTables 的 SearchPanes 擴充功能。

描述

作為標準，如果 columns.searchPanes 為 undefined，則不會將自訂選項應用於該欄位的窗格。否則，如果在此物件中定義了相關選項，則會應用這些選項。

這很有用，因為這意味著可以自訂個別欄位的窗格，而不是影響每個窗格。

類型

字串

描述: 此選項能夠保存個別窗格的所有子選項。

預設

值：undefined

columns.searchPanes 物件的預設值為 undefined，表示該窗格將使用所有預設設定。

範例

更改第三個欄位窗格的搜尋和資訊

new DataTable('#myTable', {
	layout: {
		top1: 'searchPanes'
	},
	columnDefs: [
		{
			dtOpts: {
				searching: false,
				info: true
			},
			targets: [2]
		}
	]
});

隱藏第五個欄位窗格的計數：

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