SearchFade

大家好，我是 Colin，我於去年底加入 DataTables 團隊，負責測試並在 DataTables 論壇中提供客戶支援。

最近有個問題 詢問 DataTables 是否可以顯示符合篩選條件和不符合的記錄，而不是僅顯示符合的篩選結果，並在行上使用一些顏色或陰影來區分兩者。雖然這不是 DataTables 的現成功能，但透過使用其廣泛的自訂功能（回呼和 API 方法），已建立了 SearchFade 外掛程式。

如下面的範例所示，不符合篩選結果的項目會被指定 notMatched CSS 類別，以降低其不透明度。您可以透過修改該類別，輕鬆地將其更改為顯示不同的字體或不同的背景顏色。SearchFade 完全相容於所有其他 DataTables 功能和自訂設定，因为它只會影響當前顯示的列。

姓名	職位	辦公室	薪資
Tiger Nixon	系統架構師	愛丁堡	$320,800
Garrett Winters	會計師	東京	$170,750
Ashton Cox	初級技術作家	舊金山	$86,000
Cedric Kelly	資深 Javascript 開發人員	愛丁堡	$433,060
Airi Satou	會計師	東京	$162,700
Brielle Williamson	整合專家	紐約	$372,000
Herrod Chandler	銷售助理	舊金山	$137,500
Rhona Davidson	整合專家	東京	$327,900
Colleen Hurst	Javascript 開發人員	舊金山	$205,500
Sonya Frost	軟體工程師	愛丁堡	$103,600
Jena Gaines	辦公室經理	倫敦	$90,560
Quinn Flynn	支援主管	愛丁堡	$342,000
Charde Marshall	區域總監	舊金山	$470,600
Haley Kennedy	資深行銷設計師	倫敦	$313,500
Tatyana Fitzpatrick	區域總監	倫敦	$385,750
Michael Silva	行銷設計師	倫敦	$198,500
Paul Byrd	財務長 (CFO)	紐約	$725,000
Gloria Little	系統管理員	紐約	$237,500
Bradley Greer	軟體工程師	倫敦	$132,000
Dai Rios	人事主管	愛丁堡	$217,500
Jenette Caldwell	開發主管	紐約	$345,000
Yuri Berry	行銷長 (CMO)	紐約	$675,000
Caesar Vance	售前支援	紐約	$106,450
Doris Wilder	銷售助理	雪梨	$85,600
Angelica Ramos	執行長 (CEO)	倫敦	$1,200,000
Gavin Joyce	開發人員	愛丁堡	$92,575
Jennifer Chang	區域總監	新加坡	$357,650
Brenden Wagner	軟體工程師	舊金山	$206,850
Fiona Green	營運長 (COO)	舊金山	$850,000
Shou Itou	區域行銷	東京	$163,000
Michelle House	整合專家	雪梨	$95,400
Suki Burks	開發人員	倫敦	$114,500
Prescott Bartlett	技術作家	倫敦	$145,000
Gavin Cortez	團隊領導	舊金山	$235,500
Martena Mccray	售後支援	愛丁堡	$324,050
Unity Butler	行銷設計師	舊金山	$85,675
Howard Hatfield	辦公室經理	舊金山	$164,500
Hope Fuentes	秘書	舊金山	$109,850
Vivian Harrell	財務總監	舊金山	$452,500
Timothy Mooney	辦公室經理	倫敦	$136,200
Jackson Bradshaw	總監	紐約	$645,750
Olivia Liang	支援工程師	新加坡	$234,500
Bruno Nash	軟體工程師	倫敦	$163,500
Sakura Yamamoto	支援工程師	東京	$139,575
Thor Walton	開發人員	紐約	$98,540
Finn Camacho	支援工程師	舊金山	$87,500
Serge Baldwin	資料協調員	新加坡	$138,575
Zenaida Frank	軟體工程師	紐約	$125,250
Zorita Serrano	軟體工程師	舊金山	$115,000
Jennifer Acosta	初級 Javascript 開發人員	愛丁堡	$75,650
Cara Stevens	銷售助理	紐約	$145,600
Hermione Butler	區域總監	倫敦	$356,250
Lael Greer	系統管理員	倫敦	$103,500
Jonas Alexander	開發人員	舊金山	$86,500
Shad Decker	區域總監	愛丁堡	$183,000
Michael Bruce	Javascript 開發人員	新加坡	$183,000
Donna Snider	客戶支援	紐約	$112,000

使用方法

在您的表格中使用 SearchFade 很容易。首先，將外掛程式的 Javascript 和 CSS 包含在您的頁面上

若要啟用並使用 SearchFade 輸入，請利用 layout 將控制項定位在表格周圍 - 例如，這將取代 DataTables 的內建預設搜尋

$('#myTable').DataTable({
    layout: {
        topEnd: 'searchFade'
    }
});

如果您使用的是 DataTables 的舊版 1.x，您可以使用 dom 選項，並使用 F 來定位 SearchFade！

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

或者，您可以在表格初始化階段宣告它，然後將搜尋元素的節點放置在您選擇的任何位置（如果您使用的是 Bootstrap 或 Semantic UI 等樣式整合，目前這是較簡單的選項）

var table = $('#myTable').DataTable({
    searchFade: true
});

table.searchFade().node().appendTo('body');

實作

SearchFade 使用不同的輸入元素來輸入搜尋詞，因為標準搜尋輸入會移除不符合的記錄且無法設定。在上面的範例初始化中，標準搜尋仍然可用，但可以透過將 f 選項從 dom 字串中移除來移除。

下面的程式碼使用 API 來實作我們的 SearchFade 搜尋。由於列醒目提示僅與可見列有關，因此只要在輸入元素中按下鍵盤，或重新繪製表格（可能是因為頁面變更），就會檢查所有可見列是否包含搜尋詞，如果未符合，則會指定不同的 CSS 樣式（預設情況下，這會降低不透明度）。

var table = new $.fn.dataTable.Api(settings);
var searchFade = $('<div class="searchFade"/>');

table.settings()[0].searchFadeNode = searchFade;

_draw(table, searchFade);

// Trigger a search
searchFade.on('keyup redraw', 'input', function() {
    table.rows(':visible').every(function(rowIdx, tableLoop, rowLoop) {
        var present = true;
        if ($('.searchFadeInput' + table.settings()[0].sTableId).val().length) {
            present = table
                .row(rowIdx)
                .data()
                .some(function(v) {
                    return v.match(new RegExp($('.searchFadeInput' + table.settings()[0].sTableId).val(), 'i')) != null;
                });
        }
        $(table.row(rowIdx).node()).toggleClass('notMatched', !present);
    });
});

table.on('draw', function() {
    $('.searchFadeInput').trigger('redraw');
});

// API method to get the searchFade container node
this.node = function() {
    return searchFade;
};

我們希望您喜歡這個新的外掛程式，並有機會在您的表格上使用它。如果您有任何問題或意見，請在 DataTables 論壇中留言。

祝您編碼愉快！！！