2017 年 11 月 30 日星期四

實驗：SearchPane

通常，當我為 DataTables 發布新軟體時，我會以符合自己需求的方式構建它，在我認為合適的地方進行通用化，然後發布並從那裡開始迭代。然而，這次我想採取稍微不同的方法，在將其包含在 DataTables 擴充功能之前，先為 DataTables 引入一個名為 SearchPane 的新外掛。這既是為了看看人們是否對其提供的功能感興趣，也是為了徵求回饋意見，了解您希望看到修改/改進/添加/刪除等事項。

首先 - 什麼是 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
Howard Hatfield	辦公室經理	舊金山	51	2008-12-16	$164,500
Hope Fuentes	秘書	舊金山	41	2010-02-12	$109,850
Vivian Harrell	財務總監	舊金山	62	2009-02-14	$452,500
Timothy Mooney	辦公室經理	倫敦	37	2008-12-11	$136,200
Jackson Bradshaw	主管	紐約	65	2008-09-26	$645,750
Olivia Liang	支援工程師	新加坡	64	2011-02-03	$234,500
Bruno Nash	軟體工程師	倫敦	38	2011-05-03	$163,500
Sakura Yamamoto	支援工程師	東京	37	2009-08-19	$139,575
Thor Walton	開發人員	紐約	61	2013-08-11	$98,540
Finn Camacho	支援工程師	舊金山	47	2009-07-07	$87,500
Serge Baldwin	資料協調員	新加坡	64	2012-04-09	$138,575
Zenaida Frank	軟體工程師	紐約	63	2010-01-04	$125,250
Zorita Serrano	軟體工程師	舊金山	56	2012-06-01	$115,000
Jennifer Acosta	初級 JavaScript 開發人員	愛丁堡	43	2013-02-01	$75,650
Cara Stevens	銷售助理	紐約	46	2011-12-06	$145,600
Hermione Butler	區域總監	倫敦	47	2011-03-21	$356,250
Lael Greer	系統管理員	倫敦	21	2009-02-27	$103,500
Jonas Alexander	開發人員	舊金山	30	2010-07-14	$86,500
Shad Decker	區域總監	愛丁堡	51	2008-11-13	$183,000
Michael Bruce	JavaScript 開發人員	新加坡	29	2011-06-27	$183,000
Donna Snider	客戶支援	紐約	27	2011-01-25	$112,000
姓名	職位	辦公室	年齡	開始日期	薪資

您也可以單獨查看此範例，以及以垂直顯示方式查看。

初始化

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

CSS

然後只需將 searchPane 選項新增至您的 DataTable 初始化中，這將啟用具有預設選項的 SearchPane。

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

選項

如同現有的擴充功能，SearchPane 可以透過多個選項進行設定。此初始版本只有四個選項。

container - 一個 DOM 節點，或傳回 DOM 節點的函式，應該將搜尋窗格新增到該節點。這可讓您將窗格插入文件中的任何位置。由於搜尋窗格佔用的螢幕空間比大多數 DataTables 擴充功能都多，因此這可能非常有用。
columns - 應該顯示搜尋窗格的欄位。這是一個 欄位選取器，可以使用任何這些選項。另請注意，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 授權下是開放原始碼，請 fork 並使用您新增的任何變更提供 pull request。

祝您使用愉快！