columns().search()
在所选列中搜索数据。
描述
虽然 search()
提供了在整个表中进行全局搜索的能力,但此方法及其单数对应项提供了搜索特定列中数据的能力。
DataTables 没有内置任何列搜索控件,因为有许多不同的方法可以搜索特定列的数据,但此方法使添加自定义列搜索控件变得非常容易。以下示例展示了如何使用它。
DataTables 内置了一个称为“智能”搜索的搜索算法,旨在使终端用户可以轻松使用表格数据。智能搜索使用正则表达式执行,因此如果您使用正则表达式搜索(此方法的第二个参数),则必须考虑这一点。有关 DataTables 中智能搜索的完整说明,请参阅 search()
的文档。
请注意,DataTables 中的此搜索功能实际上在技术上是一个过滤器,因为它具有减法性。但是,我们称之为搜索以避免与 filter()
辅助方法的名称重复。
请注意,此方法设置搜索仅适用于该表 - 实际上并不执行搜索。为了执行搜索并显示结果,请使用 draw()
方法,该方法可以简单地作为 columns().search()
方法的返回对象的链式方法调用 - 例如 table.columns( [0, 1] ).search( 'Fred' ).draw();
。这样做是为了在执行绘制之前对多个更改进行排队。
类型
function column().search( input [, options] )
- 描述
设置要用于所选列的搜索条件,并带有配置选项。在设置好搜索条件后,调用
draw()
以更新表格的视图。- 参数
名称 类型 可选 1 input
否 要应用于该列的搜索条件。
从 DataTables 2 开始,可以将此参数指定为正则表达式或函数。
如果处理正则表达式,则给定数据是对相关列中的单元格进行搜索时的数据。
如果是函数,则为每一行调用带两个参数的函数,参数传入;第一个是待搜索行的单元格的搜索数据,第二个是行的原始数据对象。应该返回布尔值:
true
表示保留该行,false
表示将该行过滤掉。请注意,如果为这个参数提供了正则表达式或函数,则将忽略以下参数。
2 options
否 有关执行搜索的方式的配置选项。请参阅
DataTables.SearchOptions
以获取所有选项的说明。如果此处未给出选项,则将使用在上次搜索中为该选项设置的值。- 返回
DataTables API 实例
function columns().search( input [, regex[ , smart[ , caseInsen ]]] )
- 描述
设置从选择器搜索的列的搜索词组。请注意,这实际上不会执行搜索,而是将其排队 - 使用
draw()
来执行搜索并显示结果。- 参数
名称 类型 可选 1 input
否 要应用的搜索词组。请参阅上文中的签名说明中的
input
参数以获取详细信息。2 regex
是 - 默认值:false 作为正则表达式 (
true
) 或非正则表达式 (默认值,false
) 处理。3 smart
是 - 默认值:true 执行智能搜索 (默认值,
true
) 或非智能搜索 (false
)。请参阅search()
以获取智能过滤的完整说明。请注意,为了执行智能搜索,DataTables 使用正则表达式,因此,如果您使用此方法的第二个参数来启用正则表达式,那么您可能希望禁用智能搜索,因为两个正则表达式可能会发生冲突并导致意外结果。
4 caseInsen
是 - 默认值:true 执行不区分大小写的匹配 (默认值,
true
) 或区分大小写的匹配 (false
)。- 返回
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>'));
});
});
关联的
下列选项直接关联,并且在您的应用程序开发中可能很有用。