2018 年 5 月 8 日星期二
作者 科林·马克斯

搜索淡化

大家好,我是 科林,我于去年年末加入 DataTables 团队,负责测试并提供 DataTables 论坛中的客户支持。

一个 最近的问题 是询问 DataTables 是否可以同时显示匹配和未匹配的记录,用颜色或对行阴影区分这两者,而不仅仅是显示匹配的筛选结果。这并不是 DataTables 提供的开箱即用的功能,但通过利用其广泛的可定制性(回调和 API 方法),SearchFade 插件应运而生。

正如您在下面的示例中看到,通过指定 notMatched CSS 类,将为未匹配的筛选结果提供一个降低的不透明度。通过修改该类,可以轻松地更改为显示不同的字体或不同的背景颜色。SearchFade 与所有其他 DataTables 功能和自定义完全兼容,因为它只影响当前显示的行。

姓名职位办公室工资
Tiger Nixon系统架构师爱丁堡$320,800
Garrett Winters会计东京$170,750
Ashton Cox初级技术作者旧金山$86,000
Cedric Kelly高级 Javascript 开发人员爱丁堡$433,060
Airi Satou会计东京$162,700
Brielle Williamson集成专家纽约$372,000
Herrod Chandler销售助理旧金山$137,500
Rhona Davidson集成专家东京$327,900
Colleen HurstJavascript 开发人员旧金山$205,500
Sonya Frost软件工程师爱丁堡$103,600
Jena Gaines办公室经理伦敦$90,560
Quinn Flynn支持主管爱丁堡$342,000
Charde Marshall区域总监旧金山$470,600
Haley Kennedy高级营销设计师伦敦$313,500
Tatyana Fitzpatrick区域总监伦敦$385,750
Michael Silva营销设计师伦敦$198,500
Paul Byrd首席财务官 (CFO)纽约$725,000
Gloria Little系统管理员纽约$237,500
Bradley Greer软件工程师伦敦$132,000
Dai Rios人力资源主管爱丁堡$217,500
Jenette Caldwell开发主管纽约$345,000
Yuri Berry首席营销官 (CMO)纽约$675,000
Caesar Vance售前支持纽约$106,450
Doris Wilder销售助理悉尼$85,600
Angelica Ramos首席执行官 (CEO)伦敦$1,200,000
Gavin Joyce开发人员爱丁堡$92,575
Jennifer Chang区域总监新加坡$357,650
Brenden Wagner软件工程师旧金山$206,850
Fiona Green首席运营官 (COO)旧金山$850,000
Shou Itou区域营销东京$163,000
Michelle House集成专家悉尼$95,400
Suki Burks开发人员伦敦$114,500
Prescott Bartlett技术作者伦敦$145,000
Gavin Cortez团队负责人旧金山$235,500
Martena Mccray售后支持爱丁堡$324,050
Unity Butler营销设计师旧金山$85,675
Howard Hatfield办公室经理旧金山$164,500
霍普·弗恩特斯秘书旧金山$109,850
维维安·哈勒尔财务总监旧金山$452,500
蒂莫西·穆尼办公室经理伦敦$136,200
杰克逊·布拉德肖董事纽约$645,750
奥利维亚·梁支持工程师新加坡$234,500
布鲁诺·纳什软件工程师伦敦$163,500
樱花·山本支持工程师东京$139,575
索尔·沃尔顿开发人员纽约$98,540
芬恩·卡马乔支持工程师旧金山$87,500
塞尔日·鲍德温数据协调员新加坡$138,575
泽奈达·弗兰克软件工程师纽约$125,250
佐里塔·塞拉诺软件工程师旧金山$115,000
詹妮弗·阿科斯塔初级 Javascript 开发人员爱丁堡$75,650
卡拉·史蒂文斯销售助理纽约$145,600
赫敏·巴特勒区域总监伦敦$356,250
拉埃尔·格里尔系统管理员伦敦$103,500
乔纳斯·亚历山大开发人员旧金山$86,500
沙德·德克区域总监爱丁堡$183,000
迈克尔·布鲁斯Javascript 开发人员新加坡$183,000
唐娜·斯奈德客户支持纽约$112,000

用法

将 SearchFade 与表配合使用非常容易。首先,在你的页面上手动插入插件的 JS 和 CSS

CSS
JS

要启用和使用 SearchFade 输入,利用 布局 将控件放置到表周围 - 例如,这将替换 DataTables 的内置默认搜索

$('#myTable').DataTable({
    layout: {
        topEnd: 'searchFade'
    }
});

如果你使用 DataTables 的传统 1.x 版本,你可以使用 dom 选项配合 F(代表 SearchFade!)将它定位好

$('#myTable').DataTable({
    dom: 'Flfrtip'
});

最后,你可以在表初始化阶段声明它,然后将搜索元素的节点放在你喜欢的位置(如果你使用 Bootstrap 或 Semantic UI 这类样式整合,目前这是更简单的选择)

var table = $('#myTable').DataTable({
    searchFade: true
});

table.searchFade().node().appendTo('body');

实现

SearchFade 的实现采用了不同的 input 元素来输入搜索词,因为标准搜索输入会移除不匹配记录并不可配置。在上述示例初始化中,标准搜索仍然可以使用,但可以通过从 dom 字符串中移除 f 选项来移除它。

下面给出的代码使用 API 来实现我们的 SearchFade 搜索。由于行高亮仅涉及可见行,因此每当在 input 元素中按一个键或者重绘表(可能是由于页面改动),所有可见行都会被检查搜索词,如果没有匹配,将会指派一种不同的 CSS 样式(默认为降低不透明度)。

var table = new $.fn.dataTable.Api(settings);
var searchFade = $('<div class="searchFade"/>');

table.settings()[0].searchFadeNode = searchFade;

_draw(table, searchFade);

// Trigger a search
searchFade.on('keyup redraw', 'input', function() {
    table.rows(':visible').every(function(rowIdx, tableLoop, rowLoop) {
        var present = true;
        if ($('.searchFadeInput' + table.settings()[0].sTableId).val().length) {
            present = table
                .row(rowIdx)
                .data()
                .some(function(v) {
                    return v.match(new RegExp($('.searchFadeInput' + table.settings()[0].sTableId).val(), 'i')) != null;
                });
        }
        $(table.row(rowIdx).node()).toggleClass('notMatched', !present);
    });
});

table.on('draw', function() {
    $('.searchFadeInput').trigger('redraw');
});

// API method to get the searchFade container node
this.node = function() {
    return searchFade;
};

我们希望你享受这个新插件,并在你的表中使用它。如果你有任何问题或意见,请将它们留在 DataTables 论坛。

编码快乐!!!