搜索
搜索是 DataTables 的核心部分,其目标是使数据易于访问。因此,它内置了许多搜索功能,并提供自定义搜索和 API 的选项,以允许高级和特定情况的搜索操作。本文档将详细讨论 DataTables 中如何执行搜索。
全局搜索
使用 DataTables 时,您遇到的第一个搜索控件是表格右上角的默认全局搜索。它使用 search
功能,其位置可以通过 layout
选项控制。我们将此称为“全局”搜索,因为它将在所有列中搜索数据。DataTables 的内置 search
输入默认启用以下功能
- 以任何顺序搜索单词(例如,今天 星期五 将产生与 星期五 今天 相同的数据集)。
- 不区分大小写的搜索(例如,香蕉 将给出与 BaNaNa 相同的结果)。
- 使用双引号搜索精确短语(例如,“导出数据”)。
- 使用感叹号在单词前进行否定搜索匹配(例如,!点击 将查找所有不包含“点击”一词的数据)。
我们将上述搜索称为“智能”搜索,这是最终用户通常会交互的方式。它旨在类似于 Google 和 Kagi 等搜索引擎,以便最终用户对在您的 UI 中呈现的界面立即熟悉。
API
搜索 API 是事情开始变得真正有趣的地方,因为您可以自定义搜索选项并提供您自己的自定义搜索函数。
全局搜索 API 是 search()
,如果只给它一个字符串,它提供了与全局搜索输入相同的功能
table
.search('"New York" -Chief')
.draw();
您还可以提供 DataTables.SearchOptions
对象以自定义上述搜索选项和其他选项
table.search('Chief', {
caseInsensitive: false
});
此外,您可以提供搜索函数或正则表达式 - 这真正打开了 DataTables 的搜索能力,使其几乎可以实现您能想到的任何功能
table
.search(d => d.includes('My search term'))
.draw();
列搜索
到目前为止,我们讨论了整个表格的搜索,但是,有时您希望仅将搜索词应用于特定列。这可以通过 column().search()
方法完成。DataTables 默认不显示列搜索输入元素,但是,它们可以很容易地添加,如本例所示。
column().search()
具有与上面讨论的全局搜索相同的选项。对于列搜索,可能特别感兴趣的一个额外选项是 DataTables.SearchOptions
的 exact
选项,如果您为最终用户提供了一个 select
选项,则此选项可能很有用,如本例所示。
固定搜索
search()
和 column().search()
方法将立即应用给定的搜索词,覆盖之前应用的任何搜索词。但是,有时您可能希望一次应用多个搜索词,将搜索词堆叠起来以向最终用户呈现复杂的搜索控件。这可以通过“固定”搜索来完成,您可以为搜索词提供一个唯一的名称(或 ID),它将一直应用到被替换为止。我们将此称为“固定搜索”。
API 方法是 search.fixed()
和 column().search.fixed()
。它们的工作方式与上面讨论的方法完全相同,但允许同时使用多个搜索词。
例如,以下操作将创建一个名为“citySearch”的固定搜索,除非被替换,否则它将保持不变。然后,最终用户可以使用 search
中的 input
来提供他们自己的搜索词,除了这个之外
table.search.fixed('citySearch', 'Paris');
如果您正在为 DataTables 开发一个希望可重用的插件,则固定搜索特别有用,因为它减少了搜索词冲突的可能性。
扩展
search
功能是 DataTables 默认内置的唯一搜索输入控件。但是,我们还为 DataTables 制作了许多扩展,它们提供了更高级的搜索输入
- SearchBuilder 允许最终用户构建复杂的搜索表达式
- SearchPanes 用于显示可用于搜索主表的的数据列表。
可以轻松创建其他插件,例如 此字母搜索控件。如果您为 DataTables 创建了一个搜索插件,请告知我们!
旧版搜索
在 DataTables 2 之前,必须使用 DataTable.ext.search
数组将搜索函数添加到 DataTables,该数组包含函数列表。此方法有一些缺点,包括搜索应用于页面上的所有表格以及需要额外的逻辑才能将其限制在特定表格中。
DataTables 2 中保留了对 DataTable.ext.search
的支持以实现向后兼容性,但新项目不应使用此 API,旧项目应移植到新 API。
以下信息保留用于任何使用 DataTables 1.x 的用户。不要创建使用此 API 的新项目。
DataTables 的旧版插件搜索函数应附加到 DataTable.ext.search
数组。
输入
该函数接受五个输入参数
object
- DataTables 设置对象(参见settings()
)。array
- 行的搜索数据数组。该数组对于表格中的每一列都有一个元素。integer
- 有关行的索引(参见row().index()
)。object
或array
- 行的原始数据源。这将是作为行数据源提供给 DataTables 的数组或对象。integer
- 搜索计数器。
请注意参数 2 和 4 之间的区别,因为它们可能相似并且可以携带相同的数据。作为第二个参数提供的 array
是行的搜索数据,而第四个参数是行的原始数据对象。
返回值
插件搜索函数应返回一个布尔值
true
- 行应包含在搜索结果中false
- 行应从搜索结果中删除
示例
以下示例显示了一个范围搜索,它将数据从两个输入元素(#min
和 #max
)中获取,最终用户将在其中输入数字数据以搜索表格。执行一些逻辑操作(在本例中为数字范围检查),并返回布尔值。
DataTable.ext.search.push(
function( settings, searchData, index, rowData, counter ) {
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var age = parseFloat( searchData[3] ) || 0; // using the data from the 4th column
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age && isNaN( max ) ) ||
( min <= age && age <= max ) )
{
return true;
}
return false;
}
);
如果您有兴趣,此示例 演示了如何将上述代码迁移到 DataTables 2。