2017 年 11 月 30 日星期四

实验：SearchPane

通常，当我发布适用于 DataTables 的新软件时，我都会以适合自己需求的方式进行构建，在我认为合适的地方进行概括，然后发布它并从此处进行迭代。然而，这次我想要采用略微不同的方法，引入一个适用于 DataTables 的新插件，称为 SearchPane，然后在将其包含在 DataTables 扩展功能之前进行介绍。这样做的目的是为了了解用户是否对它提供的功能感兴趣，以及征求反馈，了解您希望修改/改进/添加/移除/等事项。

首先，什么是 SearchPane？简单来说，它是 DataTables 的一个列过滤器界面。它显示一列中可找到的值列表，向最终用户展示这些值，以便用户单击这些值，搜索匹配数据的表格。它是一个基于 OR 的列过滤器 - 即添加多个选项将显示与这些数据点匹配的那些行。

让我们看看它的实际操作

姓名	职位	办公室	年龄	开始日期	薪资
Tiger Nixon	系统架构师	爱丁堡	61	2011-04-25	$320,800
Garrett Winters	会计师	东京	63	2011-07-25	$170,750
Ashton Cox	初级技术作者	旧金山	66	2009-01-12	$86,000
Cedric Kelly	高级 JavaScript 开发人员	爱丁堡	22	2012-03-29	$433,060
Airi Satou	会计师	东京	33	2008-11-28	$162,700
Brielle Williamson	集成专家	纽约	61	2012-12-02	$372,000
Herrod Chandler	销售助理	旧金山	59	2012-08-06	$137,500
Rhona Davidson	集成专家	东京	55	2010-10-14	$327,900
Colleen Hurst	JavaScript 开发人员	旧金山	39	2009-09-15	$205,500
Sonya Frost	软件工程师	爱丁堡	23	2008-12-13	$103,600
Jena Gaines	办公室经理	伦敦	30	2008-12-19	$90,560
Quinn Flynn	支持主管	爱丁堡	22	2013-03-03	$342,000
Charde Marshall	地区总监	旧金山	36	2008-10-16	$470,600
Haley Kennedy	高级营销设计师	伦敦	43	2012-12-18	$313,500
Tatyana Fitzpatrick	地区总监	伦敦	19	2010-03-17	$385,750
Michael Silva	营销设计师	伦敦	66	2012-11-27	$198,500
Paul Byrd	首席财务官 (CFO)	纽约	64	2010-06-09	$725,000
Gloria Little	系统管理员	纽约	59	2009-04-10	$237,500
Bradley Greer	软件工程师	伦敦	41	2012-10-13	$132,000
Dai Rios	人员主管	爱丁堡	35	2012-09-26	$217,500
Jenette Caldwell	开发主管	纽约	30	2011-09-03	$345,000
Yuri Berry	首席营销官 (CMO)	纽约	40	2009-06-25	$675,000
Caesar Vance	售前支持	纽约	21	2011-12-12	$106,450
Doris Wilder	销售助理	悉尼	23	2010-09-20	$85,600
Angelica Ramos	首席执行官 (CEO)	伦敦	47	2009-10-09	$1,200,000
Gavin Joyce	开发人员	爱丁堡	42	2010-12-22	$92,575
Jennifer Chang	地区总监	新加坡	28	2010-11-14	$357,650
Brenden Wagner	软件工程师	旧金山	28	2011-06-07	$206,850
Fiona Green	首席运营官 (COO)	旧金山	48	2010-03-11	$850,000
Shou Itou	区域营销	东京	20	2011-08-14	$163,000
Michelle House	集成专家	悉尼	37	2011-06-02	$95,400
Suki Burks	开发人员	伦敦	53	2009-10-22	$114,500
Prescott Bartlett	技术作者	伦敦	27	2011-05-07	$145,000
Gavin Cortez	团队负责人	旧金山	22	2008-10-26	$235,500
Martena Mccray	售后支持	爱丁堡	46	2011-03-09	$324,050
Unity Butler	营销设计师	旧金山	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
姓名	职位	办公室	年龄	开始日期	薪资

您也可以单独与垂直显示查看此示例。

初始化

要在您自己的页面上使用 SearchPane，您需要做的第一件事是在页面中包含其 CSS 和 JavaScript

CSS

然后只需将 searchPane 选项添加到 DataTable 初始化中，SearchPane 将启用其默认选项

$('#myTable').DataTable( {
    searchPane: true
} )

选项

与现有扩展一样，SearchPane 可以通过多个选项进行配置。此初始版本只有四个选项

container - 一个 DOM 节点或返回 DOM 节点的函数，应将搜索窗格添加到其中。这允许您在文档中的任何位置插入窗格。由于搜索窗格占用的屏幕空间比大多数 DataTables 扩展都要大，因此这非常有用。
columns - 应该显示搜索窗格的列。这是一个column-selector，并且可以使用这些选项中的任何一个。另请注意，threshold 选项（见下文）会影响显示哪些列。
insert - 定义是将搜索窗格追加到（append）还是预置到（prepend）由 container 选项定义的元素。默认值为 prepend。
threshold - SearchPane 计算列中数据分布的方差，并使用方差自动决定是否为该列显示搜索窗格。例如，为其中每个值都唯一的列显示窗格没有什么意义 - 最终用户可能也在查看主表。此默认值为 0.5，但必要时可对其进行更改。每个单元格中具有不同值的列的方差为 0。

示例

以下示例显示了使用容器和指定阈值的 DataTable 中 SearchPane 的初始化方式

$('#example').DataTable( {
    searchPane: {
        container: '.searchPanes',
        threshold: 0
    }
} );

API

当表中的数据更新时，您会希望搜索窗格反映更新后的数据 - 这可以通过 searchPanes.rebuild() 方法完成 - 例如：

var table = $('#example').DataTable( {
    searchPane: true
} );

table.row.add( ... ).draw();
table.searchPanes.rebuild();

反馈

那么您认为如何？这是否应继续开发并内置为 DataTables 的完整扩展？请在此论坛主题中提供反馈，以便将所有反馈集中到一个位置。

另外，该软件根据 MIT 许可证开源，请分叉并通过您添加的任何更改提供拉取请求。

享受吧！