2014 年 10 月 22 日星期三

搜尋結果醒目提示

DataTables 內建的搜尋功能讓終端使用者能夠非常快速地搜尋表格中包含的資料，將結果篩選為與他們正在尋找的內容相關的結果。然而，使用者仍然需要掃描結果，才能找到他們搜尋的特定資料。對於使用者來說，這通常不會是一個繁瑣的過程，但在複雜的表格中，可能需要幾秒鐘的時間 - 我們可以透過醒目提示結果集中的搜尋詞，來節省他們幾秒鐘的時間！

Bartek Szopka 撰寫了一個 jQuery 外掛程式，用於在任何給定的 jQuery 節點集合中醒目提示文字，這非常符合我們醒目提示的需求。這篇部落格文章詳細介紹了如何將醒目提示外掛程式非常輕鬆地與 DataTables 整合，並最終為 DataTables 建立一個可重複使用的功能外掛程式，可以非常輕鬆地在任何表格上使用。

下面顯示了一個使用此功能外掛程式的範例表格 - 已輸入初始搜尋詞以立即顯示結果，當您變更搜尋詞時，醒目提示將會自動更新。

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

簡單整合

jQuery Highlight 外掛程式的基本操作非常簡單 - 有兩種方法

$().highlight() - 醒目提示搜尋詞
$().unhighlight() - 移除現有的醒目提示

只需要幾個 DataTables API 方法和一個事件即可建立幾乎完整的整合

draw - 當表格重新繪製時，將會觸發此事件，我們可以執行所需的醒目提示
search() - 取得搜尋詞
table().body() - 取得表格的 tbody 元素。

使用此方法，我們可以建構

$(document).ready( function () {
    var table = $('#myTable').DataTable();

    table.on( 'draw', function () {
        var body = $( table.table().body() );

        body.unhighlight();
        body.highlight( table.search() );   
    } );
} );

在上面的程式碼中

第 2 行：建立 DataTable
第 4 行：監聽 draw 事件
第 5 行：取得表格 tbody 節點的參考，因為只有這個元素中的節點才應該被醒目提示。
第 7 行：移除先前搜尋的任何現有醒目提示
第 8 行：使用 search() 來取得搜尋詞並醒目提示它。

為了完整起見，也應該加入對 column-visibility 事件的監聽，因為切換欄位的可見性不需要觸發繪製，而且我們會希望將醒目提示套用到任何變為可見的欄位。

最後，如果使用者輸入「records」等搜尋詞且未找到任何列，則不應醒目提示 DataTables 的「找不到記錄」訊息！可以使用 rows() 方法並將 selector-modifier 設定為僅包含結果集中的篩選列來完成此操作

body.unhighlight();

if ( table.rows( { filter: 'applied' } ).data().length ) {
    body.highlight( table.search() );
}

功能外掛程式

雖然到此為止完全可以停止，但我們軟體工程師討厭需要複製和貼上程式碼來重複使用某項功能（這是理所當然的，因為這會在未來造成維護上的惡夢！），所以現在讓我們將上述程式碼包裝到一個可重複使用的 DataTables 功能外掛程式中。

為此，可以使用另一個 DataTables 事件： init 事件，該事件會在建立新的 DataTable 時觸發。此事件會透過 DOM 冒泡，因此 document 上的監聽器將會看到文件中每個新建立的 DataTable - 例如。

$(document).on( 'init.dt', function (e, settings, json) {
    ...
} );

下一步是檢查表格是否應該啟用列醒目提示，如果應該，則執行上面開發的醒目提示程式碼。

有三種方法可以啟動此外掛程式

將類別 searchHighlight 新增至 HTML 表格
將 DataTables 初始化中的 searchHighlight 參數設定為 true
將 searchHighlight 參數設定為 DataTables 預設值中的 true（因此會讓所有表格都具有此功能）- 例如，$.fn.dataTable.defaults.searchHighlight = true。

從上面擴充 init 程式碼以實現此目的

$(document).on( 'init.dt.dth', function (e, settings, json) {
    var table = new $.fn.dataTable.Api( settings );
    var body = $( table.table().body() );

    if (
        $( table.table().node() ).hasClass( 'searchHighlight' ) || // table has class
        settings.oInit.searchHighlight                          || // option specified
        $.fn.dataTable.defaults.searchHighlight                    // default set
    ) {
       ...
    }
} );

第 1 行：監聽 DataTable 的初始化
第 2 行：從傳遞到事件的 DataTable.Settings 物件取得 DataTables API 執行個體
第 3 行：取得表格的 body 標籤，因為我們會使用它
第 6 行：檢查表格是否具有類別 searchHighlight
第 7 行：檢查初始化選項是否有 searchHighlight（此項目的公開 API 即將推出）
第 8 行：檢查預設值是否已設定 searchHighlight
第 10 行：執行上面的醒目提示程式碼

初始化

以最簡單的形式，若要啟動表格中搜尋詞的醒目提示，現在我們需要做的就是在初始化表格時指定 searchHighlight 詞

$(document).ready( function () {
    $('#example').DataTable( {
        searchHighlight: true
    } );
} );

如上所述，給予預設值或使用類別名稱的其他選項也能正常運作。

已發佈的程式碼

此處開發的功能外掛程式的程式碼可在 DataTables CDN 上取得，可立即使用

CSS

請注意，此外掛程式也取決於 jQUery Highlight 外掛程式

它也託管在 GitHub 上的 DataTables 外掛程式存放庫中。非常歡迎 fork、pull 請求等！