SearchBuilder 介紹

SearchBuilder 是 DataTables 的一個新擴充套件，它允許終端使用者對您的表格應用進階篩選。相較於 SearchPanes 的複雜度提升，SearchBuilder 允許使用各種條件篩選欄位，而不僅僅是精確匹配。條件可以分組在一起，以建立無縫應用於表格的複雜篩選器。因此，SearchBuilder 是一種非常有效的方式，可以使用多個欄位的複雜條件來縮小結果範圍。

您可以在下方看到一個範例 - 按一下新增條件按鈕開始建立您自己的篩選器

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

下載

SearchBuilder 擴充套件可透過 我們的下載產生器 和直接從我們的 CDN 存取 (如下方的連結) 在 DataTables CDN 上取得。如果您偏好使用套件管理員，您也可以從 NPM、NuGET 和 Composer 安裝它。

功能

SearchBuilder 的推出為 DataTables 帶來了全新的方式來應用複雜的篩選。它的核心是一個介面，可讓使用者根據他們設定的條件快速篩選表格。在初始化時，SearchBuilder 會分析 DataTable 並擷取欄位及其資料類型。選取欄位後，條件選取會填入該欄位的所有可用條件，這些條件會根據資料類型而改變。SearchBuilder 預設允許篩選所有欄位，但當然可以使用 searchBuilder.columns 選項來設定。選取欄位後，相關條件會在條件選取元素中提供。此處的另一個選取會顯示相關的輸入方法，以收集要篩選此條件的值，無論是選取或輸入。對於空白條件等，不需要額外的值，因此不會提供輸入方法。

每個「條件」都可以放置在群組中。群組允許設定邏輯類型。例如，您可能希望篩選後的列滿足條件 X 和 Y，或僅滿足條件 Z。群組和子群組使這成為可能。SearchBuilder 中條件、群組、子群組或深度的數量沒有限制。這表示您可以建立您想要的複雜搜尋條件。

SearchBuilder 的建構考慮到了自訂。我們很清楚，你們許多人會想要新增自己的條件，或修改現有的條件以符合您的需求。關於如何新增您自己的條件的完整文件，可在文件中取得。

使用方式

除了核心功能和自訂條件設定選項之外，SearchBuilder 還有一些設定選項。這些包括設定深度限制、群組的預設邏輯和預先定義的條件。如果您想要更細微的樣式方法，也可以快速選擇將 SearchBuilder 中的顏色設為灰階。但一如既往，您也可以將自己的樣式新增至 SearchBuilder。

版面配置

SearchBuilder 是使用 searchBuilder 功能和 layout 選項插入頁面的，如下所示

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

如果您使用的是舊版 DataTables 1.x，則插入點是使用 DataTables 的 dom 選項完成的。Q 選項會告知 DataTables 在哪裡顯示 SearchBuilder - 例如

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

對於 Bootstrap 和 Semantic UI 等樣式庫，您可能會發現使用 searchBuilder.container() 方法來取得 SearchBuilder DOM 元素，並直接將其插入文件中會更容易 - 例如

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

SearchBuilder 設定為根據螢幕寬度自動調整其版面配置，無需開發人員進行額外工作。

未來工作

與 SearchPanes 的初始版本一樣，伺服器端處理在此 1.0.0 版本中也不可用。我們將在未來考慮新增此功能，同時也注意到在客戶端處理大型資料集時，SearchBuilder 的速度已經比 SearchPanes 快得多。

雖然這只是 1.0.0 版本，但在過去幾個月中已進行了大量的工作和測試，以確保 SearchBuilder 是一個強大的擴充套件，已準備好在生產環境中使用。

我希望 SearchBuilder 能為您的專案帶來一些改進，並且一如既往，我們鼓勵您在論壇中提供您對 SearchBuilder 這個初始版本的任何回饋，以及您認為未來有助於擴充套件的任何其他功能！