{hero}

column().search()

自 DataTables 1.10 起

在选定列中搜索数据。

说明

虽然 search() 提供在表格中全局搜索的能力,此方法及其复数形式则提供在特定列中搜索数据的能力。

DataTables 未内置任何列搜索控件,因为有许多不同的方式可以搜索列特定数据,但此方法使添加自定义列搜索控件变得极其容易。下面的示例展示了它的使用方式。

请注意,DataTables 中的此搜索功能实际上从技术上来说是一个过滤器,因为它具有减法性。但是,我们称之为搜索,以避免与 filter() 辅助方法的名称重叠。

请注意,此方法将搜索设置为仅应用于表中 - 它实际上没有执行搜索。要执行搜索并显示结果,请使用 draw() 方法,它可以简单地调用为 column().search() 方法返回的对象的链接方法 - 例如 table.column( 0 ).search( 'Fred' ).draw();。这是为了提供在执行绘制之前对多个更改进行排队的能力。

类型

function column().search()

说明

获取当前应用的列搜索。

返回值

当前应用于该列的搜索项。如果没有应用搜索搜索项,则为空字符串。

function column().search( input [, options] )

说明

设置用于选定列的搜索项,并配置选项。在设置搜索项后调用 draw() 以更新表格的视图。

参数
返回值

DataTables API 实例

函数 column().search( input [, regex[ , smart[ , caseInsen ]]] )

说明

从选择器中设置列的搜索项。请注意,自 DataTables 2 起,以上签名是首选的,因为它提供额外的选项。保留此签名是为了向后兼容。

参数
返回值

DataTables API 实例

示例

单个列搜索

var table = new DataTable('#myTable');

// #column3_search is a <input type="text"> element
$('#column3_search').on('keyup', function () {
	table
		.columns(3)
		.search(this.value)
		.draw();
});

select-filter类构建针对每个列的搜索。

var table = new DataTable('#myTable');

table.columns('.select-filter').every(function () {
	var that = this;

	// Create the select list and search operation
	var select = $('<select />')
		.appendTo(this.footer())
		.on('change', function () {
			that.search($(this).val(), { exact: true }).draw();
		});

	// Get the search data for the first column and add to the select list
	this.cache('search')
		.sort()
		.unique()
		.each(function (d) {
			select.append($('<option value="' + d + '">' + d + '</option>'));
		});
});

带有函数的单个列搜索

let table = new DataTable('#example');

// Find any row with data in column index 3 greater than 50
table
	.column(3)
	.search((d) => d > 50)
	.draw();

相关内容

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