搜索淡化
大家好,我是 科林,我于去年年末加入 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 Hurst | Javascript 开发人员 | 旧金山 | $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
要启用和使用 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 论坛。
编码快乐!!!