搜索结果高亮

DataTables 内置的搜索功能允许终端用户非常快速地搜索表中包含的数据，过滤结果直至仅剩他们正在查找的相关结果。但是，用户仍需要扫描结果以找到他们搜索到的特定数据。通常，这对于用户而言并非艰巨的过程，但对于复杂的表，这可能会花费他们几秒钟时间，而我们可以通过在结果集中突出显示搜索词来节省几秒钟时间！

Bartek Szopka 编写了一个 用于突出显示任何指定 jQuery 节点集合中文本的 jQuery 插件，这非常适合我们的高亮需求。这篇博文详细说明了如何将高亮插件与 DataTables 轻松集成，并最终为 DataTables 创建一个可重用的功能插件，该插件可在任何表上轻松使用。

使用此功能插件的示例表如下所示，已经输入了一个初始搜索词以立即显示结果，并且在您更改搜索词时，突出显示将自动更新。

姓名	职位	办公室	年龄	开始日期	工资
虎妮克松	系统架构师	爱丁堡	61	2011-04-25	$320,800
加勒特·温特斯	会计	东京	63	2011-07-25	$170,750
阿什顿·考克斯	初级技术作者	旧金山	66	2009-01-12	$86,000
西德里克·凯利	高级 Javascript 开发人员	爱丁堡	22	2012-03-29	$433,060
爱丽佐藤	会计	东京	33	2008-11-28	$162,700
布里埃尔·威廉姆森	集成专家	纽约	61	2012-12-02	$372,000
赫罗德·钱德勒	销售助理	旧金山	59	2012-08-06	$137,500
罗娜·戴维森	集成专家	东京	55	2010-10-14	$327,900
科琳·赫斯特	Javascript 开发人员	旧金山	39	2009-09-15	$205,500
索尼娅·弗罗斯特	软件工程师	爱丁堡	23	2008-12-13	$103,600
吉娜·盖恩斯	办公室经理	伦敦	30	2008-12-19	$90,560
昆恩·弗林	支持主管	爱丁堡	22	2013-03-03	$342,000
查德·马歇尔	地区总监	旧金山	36	2008-10-16	$470,600
海莉·肯尼迪	高级营销设计师	伦敦	43	2012-12-18	$313,500
塔蒂安娜·菲茨帕特里克	地区总监	伦敦	19	2010-03-17	$385,750
迈克尔·席尔瓦	营销设计师	伦敦	66	2012-11-27	$198,500
保罗·伯德	首席财务官 (CFO)	纽约	64	2010-06-09	$725,000
格洛丽亚·利特尔	系统管理员	纽约	59	2009-04-10	$237,500
布莱德利·格里尔	软件工程师	伦敦	41	2012-10-13	$132,000
戴·里奥斯	人事主管	爱丁堡	35	2012-09-26	$217,500
珍妮特·考德威尔	开发主管	纽约	30	2011-09-03	$345,000
尤里·贝瑞	首席营销官 (CMO)	纽约	40	2009-06-25	$675,000
凯撒·万斯	售前支持	纽约	21	2011-12-12	$106,450
多丽丝·怀尔德	销售助理	悉尼	23	2010-09-20	$85,600
安吉丽卡·拉莫斯	首席执行官 (CEO)	伦敦	47	2009-10-09	$1,200,000
加文·乔伊斯	开发人员	爱丁堡	42	2010-12-22	$92,575
詹妮弗·张	地区总监	新加坡	28	2010-11-14	$357,650
布伦登·瓦格纳	软件工程师	旧金山	28	2011-06-07	$206,850
菲奥娜·格林	首席运营官 (COO)	旧金山	48	2010-03-11	$850,000
秀一藤	区域营销	东京	20	2011-08-14	$163,000
米歇尔·豪斯	集成专家	悉尼	37	2011-06-02	$95,400
苏基·伯克斯	开发人员	伦敦	53	2009-10-22	$114,500
普雷斯科特·巴特利特	技术作者	伦敦	27	2011-05-07	$145,000
加文·科尔特斯	团队负责人	旧金山	22	2008-10-26	$235,500
马蒂娜·麦科瑞	售后支持	爱丁堡	46	2011-03-09	$324,050
尤尼蒂·巴特勒	营销设计师	旧金山	47	2009-12-09	$85,675
霍华德·哈特菲尔德	办公室经理	旧金山	51	2008-12-16	$164,500
霍普·弗恩特斯	秘书	旧金山	41	2010-02-12	$109,850
维维安·哈勒尔	财务主管	旧金山	62	2009-02-14	$452,500
蒂莫西·穆尼	办公室经理	伦敦	37	2008-12-11	$136,200
杰克逊·布拉德肖	董事	纽约	65	2008-09-26	$645,750
奥利维亚·梁	支持工程师	新加坡	64	2011-02-03	$234,500
布鲁诺·纳什	软件工程师	伦敦	38	2011-05-03	$163,500
樱花·山本	支持工程师	东京	37	2009-08-19	$139,575
托尔·沃尔顿	开发人员	纽约	61	2013-08-11	$98,540
芬恩·卡马乔	支持工程师	旧金山	47	2009-07-07	$87,500
塞尔日·鲍德温	数据协调员	新加坡	64	2012-04-09	$138,575
泽奈达·弗兰克	软件工程师	纽约	63	2010-01-04	$125,250
佐里塔·塞拉诺	软件工程师	旧金山	56	2012-06-01	$115,000
詹妮弗·阿科斯塔	初级 JavaScript 开发人员	爱丁堡	43	2013-02-01	$75,650
卡拉·史蒂文斯	销售助理	纽约	46	2011-12-06	$145,600
赫敏·巴特勒	地区总监	伦敦	47	2011-03-21	$356,250
莱尔·格里尔	系统管理员	伦敦	21	2009-02-27	$103,500
乔纳斯·亚历山大	开发人员	旧金山	30	2010-07-14	$86,500
沙德·德克	地区总监	爱丁堡	51	2008-11-13	$183,000
迈克尔·布鲁斯	Javascript 开发人员	新加坡	29	2011-06-27	$183,000
唐娜·斯奈德	客户支持	纽约	27	2011-01-25	$112,000
姓名	职位	办公室	年龄	开始日期	工资

简单的集成

jQuery Highlight 插件的基本操作非常简单 - 有两种方法

• $().highlight() - 突出显示搜索词
• $().unhighlight() - 去除现有的高亮

仅需一对 DataTables API 方法和一个事件来创建几乎完全的集成

• draw - 当表格被重新绘制时将触发此事件，我们便可以执行所需的突出显示操作
• search() - 获取搜索词
• table().body() - 获得表格的 tbody 元素。

利用它，我们可以构建

$(document).ready( function () {
    var table = $('#myTable').DataTable();

    table.on( 'draw', function () {
        var body = $( table.table().body() );

        body.unhighlight();
        body.highlight( table.search() );   
    } );
} );

在上述代码中

• 第 2 行：创建 DataTable
• 第 4 行：监听 draw 事件
• 第 5 行：获取对表格 tbody 节点的引用，因为应该仅突出此元素中的节点。
• 第 7 行：去除由前次搜索创建的任何现有的高亮
• 第 8 行：使用 search() 获取搜索词并对其进行高亮。

为了完整性，还应添加对 column-visibility 事件的监听器，因为切换列可见性不需要触发绘制，而我们需要高亮应用于变得可见的任何列。

最后，如果用户输入诸如“records”之类的搜索词并且未找到任何行，则不应高亮显示 DataTables 的“未找到任何记录”消息！这可以使用 rows() 方法来实现，并使用 selector-modifier 修饰器来仅将结果集中的过滤行包括在内

body.unhighlight();

if ( table.rows( { filter: 'applied' } ).data().length ) {
    body.highlight( table.search() );
}

特征插件

虽然在这一点上完全有可能会停止，但我们软件工程师们讨厌需要复制和粘贴代码才能重新使用一项功能（这是有道理的，因为它在未来会成为维护工作的噩梦！），所以现在让我们将上述代码包装到一个可重用的 DataTables 特征插件中。

为此可以使用另一个 DataTables 事件：init 事件，该事件在创建新 DataTable 时触发。此事件通过 DOM 冒泡，因此作用于 document 的监听器将看到文档中的每个新创建的 DataTable，即

$(document).on( 'init.dt', function (e, settings, json) {
    ...
} );

下一步是检查是否应该在表格上启用行高亮，如果应该，则运行上面开发的高亮代码。

有三种方法可以激活此插件

• 将类 searchHighlight 添加到 HTML 表格
• 将 DataTables 初始化中的 searchHighlight 参数设置为真
• 将 searchHighlight 参数在 DataTables 默认设置中设置为真（从而导致所有表格都具有此功能），即 $.fn.dataTable.defaults.searchHighlight = true。

为了达到此目的，可以将上面 init 代码扩展开来

$(document).on( 'init.dt.dth', function (e, settings, json) {
    var table = new $.fn.dataTable.Api( settings );
    var body = $( table.table().body() );

    if (
        $( table.table().node() ).hasClass( 'searchHighlight' ) || // table has class
        settings.oInit.searchHighlight                          || // option specified
        $.fn.dataTable.defaults.searchHighlight                    // default set
    ) {
       ...
    }
} );

• 第 1 行：侦听 DataTable 的初始化
• 第 2 行：从传入事件的 DataTable.Settings 对象获取一个 DataTables API 实例
• 第 3 行：获取表格的主体标签，因为我们将在其中使用它
• 第 6 行：检查表格是否具有 searchHighlight 类
• 第 7 行：检查初始化选项是否具有 searchHighlight（稍后将会为此提供公用 API）
• 第 8 行：检查默认值中是否设置了 searchHighlight
• 第 10 行：运行上述高亮代码

初始化

最简单的方法是，若要激活表格中搜索结果的高亮显示，现在只需在初始化表格时指定 searchHighlight 词语即可

$(document).ready( function () {
    $('#example').DataTable( {
        searchHighlight: true
    } );
} );

其他方法是提供一个默认值或使用如上定义的类名，效果也很不错。

发布的代码

此处开发的功能插件代码可在 DataTables CDN 上立即使用

此外，请注意，此插件依赖于 jQuery Highlight 插件

它还托管在 GitHub 上的 DataTables 插件代码库 中。十分欢迎提交分叉、拉取请求等！