DataTables
高级交互
适用于您表格的功能。
Editor
全面编辑
适用于 DataTables 的库。
手册
下载
≡ 显示网站导航
2020 年 1 月 13 日（星期一）
作者Sandy Galloway

SearchPanes 发布

艾伦之前在 博客文章 中作为实验推出了 SearchPanes，希望获得反馈。反馈效果良好，许多人对提高 DataTables 搜索功能表现出兴趣，我高兴地宣布从 8 月份以来，我一直在致力于 SearchPanes，它现在已成为 DataTables 的一流、全面支持的扩展。

自原始博客文章以来，SearchPanes 的基本理念未曾改变，尽管现在具有一整套自定义选项，并得到了充分记录，而且样式也得到了改善。

您可以在下面看到一个示例

姓名职位办公室年龄入职时间薪水
Tiger Nixon系统架构师爱丁堡612011-04-25$320,800
Garrett Winters会计东京632011-07-25$170,750
Ashton Cox初级技术作者旧金山662009-01-12$86,000
Cedric Kelly高级 Javascript 开发人员爱丁堡222012-03-29$433,060
Airi Satou会计东京332008-11-28$162,700
Brielle Williamson集成专家纽约612012-12-02$372,000
Herrod Chandler销售助理旧金山592012-08-06$137,500
Rhona Davidson集成专家东京552010-10-14$327,900
Colleen HurstJavascript 开发人员旧金山392009-09-15$205,500
Sonya Frost软件工程师爱丁堡232008-12-13$103,600
Jena Gaines办公室经理伦敦302008-12-19$90,560
Quinn Flynn支持主管爱丁堡222013-03-03$342,000
Charde Marshall区域主管旧金山362008-10-16$470,600
Haley Kennedy高级营销设计师伦敦432012-12-18$313,500
Tatyana Fitzpatrick区域主管伦敦192010-03-17$385,750
Michael Silva营销设计师伦敦662012-11-27$198,500
Paul Byrd首席财务官 (CFO)纽约642010-06-09$725,000
Gloria Little系统管理员纽约592009-04-10$237,500
Bradley Greer软件工程师伦敦412012-10-13$132,000
Dai Rios人事主管爱丁堡352012-09-26$217,500
Jenette Caldwell开发主管纽约302011-09-03$345,000
Yuri Berry首席营销官 (CMO)纽约402009-06-25$675,000
Caesar Vance售前支持纽约212011-12-12$106,450
Doris Wilder销售助理悉尼232010-09-20$85,600
Angelica Ramos首席执行官 (CEO)伦敦472009-10-09$1,200,000
Gavin Joyce开发人员爱丁堡422010-12-22$92,575
Jennifer Chang区域主管新加坡282010-11-14$357,650
Brenden Wagner软件工程师旧金山282011-06-07$206,850
Fiona Green首席运营官 (COO)旧金山482010-03-11$850,000
Shou Itou区域营销东京202011-08-14$163,000
Michelle House集成专家悉尼372011-06-02$95,400
Suki Burks开发人员伦敦532009-10-22$114,500
Prescott Bartlett技术作者伦敦272011-05-07$145,000
Gavin Cortez团队负责人旧金山222008-10-26$235,500
Martena Mccray售后支持爱丁堡462011-03-09$324,050
Unity Butler营销设计师旧金山472009-12-09$85,675
Howard Hatfield办公室经理旧金山512008-12-16$164,500
Hope Fuentes秘书旧金山412010-02-12$109,850
Vivian Harrell财务主管旧金山622009-02-14$452,500
Timothy Mooney办公室经理伦敦372008-12-11$136,200
Jackson Bradshaw主管纽约652008-09-26$645,750
Olivia Liang支持工程师新加坡642011-02-03$234,500
Bruno Nash软件工程师伦敦382011-05-03$163,500
Sakura Yamamoto支持工程师东京372009-08-19$139,575
Thor Walton开发人员纽约612013-08-11$98,540
Finn Camacho支持工程师旧金山472009-07-07$87,500
Serge Baldwin数据协调员新加坡642012-04-09$138,575
泽纳伊达·弗兰克软件工程师纽约632010-01-04$125,250
佐丽塔·塞拉诺软件工程师旧金山562012-06-01$115,000
詹妮弗·阿科斯塔初级 JavaScript 开发人员爱丁堡432013-02-01$75,650
卡拉·史蒂文斯销售助理纽约462011-12-06$145,600
赫敏·巴特勒区域主管伦敦472011-03-21$356,250
莱尔·格里尔系统管理员伦敦212009-02-27$103,500
乔纳斯·亚历山大开发人员旧金山302010-07-14$86,500
沙德·德克区域主管爱丁堡512008-11-13$183,000
迈克尔·布鲁斯Javascript 开发人员新加坡292011-06-27$183,000
唐娜·斯奈德客户支持纽约272011-01-25$112,000
姓名职位办公室年龄入职时间薪水

下载

SearchPanes 扩展在 DataTables CDN 和 下载构建器 中可用。您还可以从 NPM 安装该扩展。

功能

SearchPanes 大大增强了 DataTables 的搜索功能。在最基本的层面，SearchPanes 将分析 DataTable 中的数据，并根据唯一性阈值判断是否值得为每列显示 SearchPane。此值是列中唯一值数与总行数的比值。如果此值低于阈值（默认值为 0.6），则会显示窗格。当然您也可以使用 searchPanes.threshold 选项根据自己的喜好配置此值。您还可以略过此步骤，强制对指定列显示窗格，方法是使用 columns.searchPanes.show 选项。

自原型以来所做的更改

我们从原始原型中收到了许多宝贵的反馈，并做了许多更改，包括

  • 选项列表现在使用 DataTable，这使我们能够利用 DataTables 的排序和筛选功能。因此，选项列表将按与源表相同的方式进行排序，即使对于复杂数据类型也是如此，并且最终用户可以通过选项列表进行筛选。
  • 布局使用 flexbox。有关布局选项，请参见下文。
  • 这是首个完全用 TypeScript 编写的数据表扩展。
  • 有一个级联选项（searchPanes.cascadePanes），这是最常请求的功能之一，它会根据所做选择来筛选窗格中的选项。
  • 现在使用 选择扩展 选择选项，因此您可以换档并按住 Ctrl/cmd 键单击以获得多个选择选项。
  • 我们在性能方面投入了大量时间！

用法

除了核心功能集之外，SearchPanes 还有许多配置选项。如上所述，每个窗格都实现了一个 DataTable 以显示搜索选项，因此可以通过使用 searchPanes.dtOpts 选项利用所有 DataTables 配置选项。有关可用选项的完整列表，请参阅 选项参考。

布局

使用 searchPanes 功能和 layout 选项将 SearchPanes 插入到页面中，如下所示

$('#myTable').DataTable({
    layout: {
        top1: 'searchPanes'
    }
    dom: 'Qlfrtip'
});

如果您使用的是旧版 DataTables 1.x，则插入点是使用 DataTables 的 dom 选项。 P 选项告诉 DataTables 在哪里显示 SearchPanes - 例如

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

针对 1.x DataTables 中更复杂的 dom 布局（例如与 Bootstrap 中的布局），可以使用 searchPanes.container() 方法将面板直接插入到所需文档中。 Bootstrap 4 示例利用了此方法。

SearchPanes 还具有自己的布局配置选项。可以使用内置 dtsp-verticalContainer、dtsp-verticalPanes 和 dtsp-dataTable 类和其他配置来更改面板布局，使面板垂直显示在表格一侧。

$('#myTable').DataTable({
    dom: '<"dtsp-verticalContainer"<"dtsp-verticalPanes"P><"dtsp-dataTable"frtip>>',
    searchPanes:{
        layout: 'columns-1'
    }
});

可以在提供的链接中找到 此示例。

默认情况下，面板在 DataTable 上方以 3 列宽显示。它可以通过使用 searchPanes.layout 选项将其显示为表格上方的 1 至 6 列宽。

自定义搜索选项

SearchPanes 还可以设置自定义搜索选项，而无需从主机 DataTable 自动派生值。这是通过在 columns.searchPanes.options 数组中定义选项来完成的。在定义自定义搜索函数时，需要定义两个属性

  • label - 此选项在面板中向最终用户显示的文本
  • value - 您的自定义函数。

这允许使用复杂程度可以随心所欲的自定义选项。以下是自定义选项的示例，包括范围筛选器

姓名职位办公室年龄入职时间薪水
Tiger Nixon系统架构师爱丁堡612011-04-25$320,800
Garrett Winters会计东京632011-07-25$170,750
Ashton Cox初级技术作者旧金山662009-01-12$86,000
Cedric Kelly高级 Javascript 开发人员爱丁堡222012-03-29$433,060
Airi Satou会计东京332008-11-28$162,700
Brielle Williamson集成专家纽约612012-12-02$372,000
Herrod Chandler销售助理旧金山592012-08-06$137,500
Rhona Davidson集成专家东京552010-10-14$327,900
Colleen HurstJavascript 开发人员旧金山392009-09-15$205,500
Sonya Frost软件工程师爱丁堡232008-12-13$103,600
Jena Gaines办公室经理伦敦302008-12-19$90,560
Quinn Flynn支持主管爱丁堡222013-03-03$342,000
Charde Marshall区域主管旧金山362008-10-16$470,600
Haley Kennedy高级营销设计师伦敦432012-12-18$313,500
Tatyana Fitzpatrick区域主管伦敦192010-03-17$385,750
Michael Silva营销设计师伦敦662012-11-27$198,500
Paul Byrd首席财务官 (CFO)纽约642010-06-09$725,000
Gloria Little系统管理员纽约592009-04-10$237,500
Bradley Greer软件工程师伦敦412012-10-13$132,000
Dai Rios人事主管爱丁堡352012-09-26$217,500
Jenette Caldwell开发主管纽约302011-09-03$345,000
Yuri Berry首席营销官 (CMO)纽约402009-06-25$675,000
Caesar Vance售前支持纽约212011-12-12$106,450
Doris Wilder销售助理悉尼232010-09-20$85,600
Angelica Ramos首席执行官 (CEO)伦敦472009-10-09$1,200,000
Gavin Joyce开发人员爱丁堡422010-12-22$92,575
Jennifer Chang区域主管新加坡282010-11-14$357,650
Brenden Wagner软件工程师旧金山282011-06-07$206,850
Fiona Green首席运营官 (COO)旧金山482010-03-11$850,000
Shou Itou区域营销东京202011-08-14$163,000
Michelle House集成专家悉尼372011-06-02$95,400
Suki Burks开发人员伦敦532009-10-22$114,500
Prescott Bartlett技术作者伦敦272011-05-07$145,000
Gavin Cortez团队负责人旧金山222008-10-26$235,500
Martena Mccray售后支持爱丁堡462011-03-09$324,050
Unity Butler营销设计师旧金山472009-12-09$85,675
Howard Hatfield办公室经理旧金山512008-12-16$164,500
Hope Fuentes秘书旧金山412010-02-12$109,850
Vivian Harrell财务主管旧金山622009-02-14$452,500
Timothy Mooney办公室经理伦敦372008-12-11$136,200
Jackson Bradshaw主管纽约652008-09-26$645,750
Olivia Liang支持工程师新加坡642011-02-03$234,500
Bruno Nash软件工程师伦敦382011-05-03$163,500
Sakura Yamamoto支持工程师东京372009-08-19$139,575
Thor Walton开发人员纽约612013-08-11$98,540
Finn Camacho支持工程师旧金山472009-07-07$87,500
Serge Baldwin数据协调员新加坡642012-04-09$138,575
泽纳伊达·弗兰克软件工程师纽约632010-01-04$125,250
佐丽塔·塞拉诺软件工程师旧金山562012-06-01$115,000
詹妮弗·阿科斯塔初级 JavaScript 开发人员爱丁堡432013-02-01$75,650
卡拉·史蒂文斯销售助理纽约462011-12-06$145,600
赫敏·巴特勒区域主管伦敦472011-03-21$356,250
莱尔·格里尔系统管理员伦敦212009-02-27$103,500
乔纳斯·亚历山大开发人员旧金山302010-07-14$86,500
沙德·德克区域主管爱丁堡512008-11-13$183,000
迈克尔·布鲁斯Javascript 开发人员新加坡292011-06-27$183,000
唐娜·斯奈德客户支持纽约272011-01-25$112,000
姓名职位办公室年龄入职时间薪水

有关如何创建这些选项的更多详细信息，请参阅 关于自定义搜索选项的文档页面。

自定义 SearchPanes

在创建自定义选项时，可以访问所有 DataTables 列中的数据。因此，如果您想创建不适合一列的自定义选项，则可以通过完全利用 searchPanes.panes 数组来创建额外的面板（即与特定列无关）。此数组保存要创建的每个面板的对象。对于这些对象中的每一个，都存在一个 header 属性，该属性保存要设置为面板标题的字符串（通常自动从列标题派生）。还有一个 searchPanes 属性，该属性反过来又具有一个 options 属性，该属性与以前一样保存自定义搜索函数。

以下示例显示了一个 SearchPanes，其中有一个自定义面板，该面板将在多列中搜索“东京的会计师”（还可以轻松添加其他选项）

姓名职位办公室年龄入职时间薪水
Tiger Nixon系统架构师爱丁堡612011-04-25$320,800
Garrett Winters会计东京632011-07-25$170,750
Ashton Cox初级技术作者旧金山662009-01-12$86,000
Cedric Kelly高级 Javascript 开发人员爱丁堡222012-03-29$433,060
Airi Satou会计东京332008-11-28$162,700
Brielle Williamson集成专家纽约612012-12-02$372,000
Herrod Chandler销售助理旧金山592012-08-06$137,500
Rhona Davidson集成专家东京552010-10-14$327,900
Colleen HurstJavascript 开发人员旧金山392009-09-15$205,500
Sonya Frost软件工程师爱丁堡232008-12-13$103,600
Jena Gaines办公室经理伦敦302008-12-19$90,560
Quinn Flynn支持主管爱丁堡222013-03-03$342,000
Charde Marshall区域主管旧金山362008-10-16$470,600
Haley Kennedy高级营销设计师伦敦432012-12-18$313,500
Tatyana Fitzpatrick区域主管伦敦192010-03-17$385,750
Michael Silva营销设计师伦敦662012-11-27$198,500
Paul Byrd首席财务官 (CFO)纽约642010-06-09$725,000
Gloria Little系统管理员纽约592009-04-10$237,500
Bradley Greer软件工程师伦敦412012-10-13$132,000
Dai Rios人事主管爱丁堡352012-09-26$217,500
Jenette Caldwell开发主管纽约302011-09-03$345,000
Yuri Berry首席营销官 (CMO)纽约402009-06-25$675,000
Caesar Vance售前支持纽约212011-12-12$106,450
Doris Wilder销售助理悉尼232010-09-20$85,600
Angelica Ramos首席执行官 (CEO)伦敦472009-10-09$1,200,000
Gavin Joyce开发人员爱丁堡422010-12-22$92,575
Jennifer Chang区域主管新加坡282010-11-14$357,650
Brenden Wagner软件工程师旧金山282011-06-07$206,850
Fiona Green首席运营官 (COO)旧金山482010-03-11$850,000
Shou Itou区域营销东京202011-08-14$163,000
Michelle House集成专家悉尼372011-06-02$95,400
Suki Burks开发人员伦敦532009-10-22$114,500
Prescott Bartlett技术作者伦敦272011-05-07$145,000
Gavin Cortez团队负责人旧金山222008-10-26$235,500
Martena Mccray售后支持爱丁堡462011-03-09$324,050
Unity Butler营销设计师旧金山472009-12-09$85,675
Howard Hatfield办公室经理旧金山512008-12-16$164,500
Hope Fuentes秘书旧金山412010-02-12$109,850
Vivian Harrell财务主管旧金山622009-02-14$452,500
Timothy Mooney办公室经理伦敦372008-12-11$136,200
Jackson Bradshaw主管纽约652008-09-26$645,750
Olivia Liang支持工程师新加坡642011-02-03$234,500
Bruno Nash软件工程师伦敦382011-05-03$163,500
Sakura Yamamoto支持工程师东京372009-08-19$139,575
Thor Walton开发人员纽约612013-08-11$98,540
Finn Camacho支持工程师旧金山472009-07-07$87,500
Serge Baldwin数据协调员新加坡642012-04-09$138,575
泽纳伊达·弗兰克软件工程师纽约632010-01-04$125,250
佐丽塔·塞拉诺软件工程师旧金山562012-06-01$115,000
詹妮弗·阿科斯塔初级 JavaScript 开发人员爱丁堡432013-02-01$75,650
卡拉·史蒂文斯销售助理纽约462011-12-06$145,600
赫敏·巴特勒区域主管伦敦472011-03-21$356,250
莱尔·格里尔系统管理员伦敦212009-02-27$103,500
乔纳斯·亚历山大开发人员旧金山302010-07-14$86,500
沙德·德克区域主管爱丁堡512008-11-13$183,000
迈克尔·布鲁斯Javascript 开发人员新加坡292011-06-27$183,000
唐娜·斯奈德客户支持纽约272011-01-25$112,000
姓名职位办公室年龄入职时间薪水

更多示例和配置选项可在 SearchPanes 文档 和 编程参考 中找到。

已知限制

值得注意的是，在使用大量行时，SearchPanes 可能会非常耗费进程。有时，这会导致在搜索表格及加载窗格时出现延迟。不过，可以使用多种技巧来解决此问题，具体请参阅 性能示例 中的详细说明，包括启用 deferRender 和利用 Scroller。

SearchPanes 目前也不支持服务器端处理，不过，即使在此发布之后，此功能也处于积极开发中！

未来工作

尽管这仅仅是一个 1.0.0 版本，但在过去几个月里已经进行了大量的开发和测试工作，以确保 SearchPanes 成为一个强大的扩展，已准备好用于生产环境。

我希望 SearchPanes 能够为您的项目带来一些改进，并且一如既往，我们鼓励您在 论坛 中提供您对 SearchPanes 此次初始发布的任何反馈，以及您认为将来对扩展有益的任何其他功能！

页面导航

DataTables

DataTables 由 SpryMedia Ltd 设计和创建。
© 2007-2024 MIT 许可。 隐私政策。 支持者。
SpryMedia Ltd 注册于苏格兰，公司编号：SC456502。