{hero}

columns().search()

自:DataTables 1.10 起

在所选列中搜索数据。

描述

虽然 search() 提供了在整个表中进行全局搜索的能力,但此方法及其单数对应项提供了搜索特定列中数据的能力。

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

DataTables 内置了一个称为“智能”搜索的搜索算法,旨在使终端用户可以轻松使用表格数据。智能搜索使用正则表达式执行,因此如果您使用正则表达式搜索(此方法的第二个参数),则必须考虑这一点。有关 DataTables 中智能搜索的完整说明,请参阅 search() 的文档。

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

请注意,此方法设置搜索仅适用于该表 - 实际上并不执行搜索。为了执行搜索并显示结果,请使用 draw() 方法,该方法可以简单地作为 columns().search() 方法的返回对象的链式方法调用 - 例如 table.columns( [0, 1] ).search( 'Fred' ).draw();。这样做是为了在执行绘制之前对多个更改进行排队。

类型

function columns().search()

描述

获取当前应用的列搜索。

返回

Api 实例,其中包含结果集中所选列的应用搜索条件。

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

描述

设置要用于所选列的搜索条件,并带有配置选项。在设置好搜索条件后,调用 draw() 以更新表格的视图。

参数
返回

DataTables API 实例

function columns().search( input [, regex[ , smart[ , caseInsen ]]] )

描述

设置从选择器搜索的列的搜索词组。请注意,这实际上不会执行搜索,而是将其排队 - 使用 draw() 来执行搜索并显示结果。

参数
返回

DataTables API 实例

实例

应用到多个列的搜索

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

table
	.columns('.status')
	.search('Important')
	.draw();

为每列构建文本 input 搜索。请注意,此示例执行部分单词匹配和智能搜索。

// Setup - add a text input to each footer cell
$('#example tfoot th').each(function () {
	var title = $('#example thead th')
		.eq($(this).index())
		.text();
	$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});

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

// Apply the filter
table.columns().every(function () {
	var column = this;

	$('input', this.footer()).on('keyup change', function () {
		column.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>'));
		});
});

关联的

下列选项直接关联,并且在您的应用程序开发中可能很有用。