SearchPanes 發布

Allan 先前在 部落格文章中，以實驗性質的方式介紹了 SearchPanes，並徵求意見回饋。回饋意見相當良好，許多人都有興趣改善 DataTables 的搜尋功能，我很榮幸地宣布，自八月以來我一直致力於開發 SearchPanes，現在它已成為 DataTables 的一流且完全受支援的擴充套件。

SearchPanes 背後的基本概念自原始部落格文章以來並未改變，儘管它現在擁有一整套自訂選項，有完整的說明文件，並且樣式也已獲得改進。

您可以在下方看到範例

姓名	職位	辦公室	年齡	到職日期	薪資
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
姓名	職位	辦公室	年齡	到職日期	薪資

下載

SearchPanes 擴充套件可在 DataTables CDN 和下載產生器中使用。您也可以從 NPM 安裝它。

功能

SearchPanes 大幅改善了 DataTables 的搜尋功能。在其最基本的形式中，SearchPanes 將分析 DataTable 中的資料，並針對每個資料欄，根據唯一性閾值決定是否值得顯示 SearchPane。此值是資料欄中唯一值的數量與總行數的比率。如果此值低於閾值（預設值為 0.6），則會顯示窗格。當然，您可以使用 searchPanes.threshold 選項，將此值設定為您自己喜歡的值。您也可以跳過此步驟，並使用 columns.searchPanes.show 選項，強制顯示指定資料欄的窗格。

自原型以來的變更

我們從原始原型收到許多很棒的意見回饋，並進行了一些變更，包括

• 選項清單現在使用 DataTable，讓我們可以充分利用 DataTables 的排序和篩選功能。因此，選項清單將以與來源表格相同的順序排序，即使是複雜的資料類型也一樣，而且最終使用者可以篩選選項清單。
• 版面配置使用 flexbox。請參閱下方有關版面配置選項的資訊。
• 這是第一個完全使用 TypeScript 撰寫的 DataTables 擴充套件。
• 有一個串聯選項 (searchPanes.cascadePanes) 是最常被要求的功能之一，會在進行選取時篩選窗格中的選項。
• 現在使用 Select 擴充套件來完成選項選取，因此您可以按住 Shift 鍵和 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'
});

若要使用更複雜的 DataTables 1.x 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	系統架構師	愛丁堡	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
姓名	職位	辦公室	年齡	到職日期	薪資

有關如何建立這些選項的更多詳細資訊，請參閱關於自訂搜尋選項的文件頁面。

自訂 SearchPanes

建立自訂選項時，可以存取來自所有 DataTables 資料欄的資料。因此，如果您想要建立不適合單一資料欄的自訂選項，則可以完全透過使用 searchPanes.panes 陣列，來建立額外的窗格（即未與特定資料欄繫結）。此陣列包含要建立的每個窗格的物件。對於每個物件，都有一個 header 屬性，其中包含要設定為窗格標題的字串（通常自動從資料欄標題衍生）。還有一個 searchPanes 屬性，其中反過來有一個 options 屬性，其中包含如前所述的自訂搜尋函式。

以下範例顯示了 SearchPanes，其包含一個自訂窗格，將在多個資料欄中搜尋「東京的會計師」（可以輕易地新增其他選項）

姓名	職位	辦公室	年齡	到職日期	薪資
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
姓名	職位	辦公室	年齡	到職日期	薪資

可以在SearchPanes 文件和程式設計參考中找到更多範例和組態選項。

已知限制

值得注意的是，當使用大量資料列時，SearchPanes 可能會非常耗費處理資源。有時這會在搜尋表格以及載入窗格時造成延遲。然而，可以使用多種技術來解決這個問題，詳情請見效能範例，包括啟用 deferRender 以及使用 Scroller。

SearchPanes 目前也不支援伺服器端處理，儘管在這個版本發佈時，伺服器端處理仍在積極開發中！

未來工作

雖然這只是一個 1.0.0 版本，但在過去幾個月裡，我們已經進行了大量的工作和測試，以確保 SearchPanes 是一個強大的擴展功能，可以在生產環境中使用。

我希望 SearchPanes 能為您的專案帶來一些改進，並且一如既往地，我們鼓勵您在論壇上提供您對 SearchPanes 初版版本的任何回饋，以及您認為未來會對這個擴展功能有益的任何其他功能！