DataTables
為您的表格提供進階互動功能。
為您的表格提供進階互動功能。
Editor
適用於 DataTables 的
全面編輯函式庫。
手冊
下載
≡ 顯示網站導覽
2024 年 3 月 15 日星期五
作者：Allan Jardine

DataTables 2！

我非常高興地宣布 DataTables 2 正式上市。它的開發歷時已久，部分開發工作始於 2018 年，但它現在終於面世了。我認為這是 DataTables 的一大進步，它具有新的選項、API 方法，以及大量的改進和整體提升。

什麼是 DataTables

如果您正在閱讀本文，您很可能知道 DataTables 是什麼，但以防萬一您不知道，它是一個免費的開源 Javascript 函式庫，用於增強 HTML 表格。在其最簡單的形式中，它會為任何 HTML 表格新增排序、搜尋和分頁功能，但它能做的遠不止這些。它廣泛的 API 和選項使其可以自訂和控制表格以滿足您的需求。它還可以透過幾個主要的 CSS 框架進行樣式設定，使其無縫地融入您的網站/應用程式。

DataTables 還有各種擴充套件，可新增額外的功能，例如建立匯出檔案、凍結標頭和欄位等等。我們還製作了DataTables 的 Editor，這是我們的商業軟體，它為 DataTables 新增了完整的建立、編輯和刪除操作，以及簡化 CRUD 的伺服器端函式庫。

2.0 版的新功能

DataTables 中有很多小的改進和提升，但有一些重要的功能提升了它的能力

  • 新的layout選項
  • 改進的搜尋功能
  • 項目語言選項

在以下功能討論中，我們將參考以下 DataTable

名稱職位辦公室薪資
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 HurstJavascript 開發人員舊金山$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 BruceJavascript 開發人員新加坡$183,000
Donna Snider客戶支援紐約$112,000

此表格使用以下方式初始化

new DataTable('#newFeatures', {
    language: {
        entries: {
            _: 'people',
            1: 'person'
        }
    },
    layout: {
        topStart: 'info',
        bottomStart: 'pageLength'
    }
});

版面配置

自訂表格控制元素的定位，以及新增其他元素 (例如 按鈕) 可能是最常用的設定選項。在 DataTables 1.x 中，這是透過使用 dom 字串來實現的，當與 Bootstrap 等樣式整合一起使用時，該字串很快就會變得難以處理。DataTables 2 使用新的 layout 選項解決了這個問題，該選項可用於在常見的物件定義中將控制元素放置在表格周圍，而無需考慮使用的樣式函式庫。

在上面的範例中，我已將表格資訊和分頁長度控制項的位置從其預設位置交換。這非常簡單，只需使用

layout: {
    topStart: 'info',
    bottomStart: 'pageLength'
}

但是，layout 的實用性不僅限於此，它還允許在個別基礎上設定每個控制元素 (在 DataTables 中稱為「功能」)。這使得每個功能有多個實例變得非常簡單，對於按鈕特別有用，例如，您可以使用

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [ 'create', 'edit', 'remove' ]
        },
        topEnd: {
            buttons: [ 'excel', 'csv' ]
        }
    }
});

此外，透過 DataTable.feature.register() 方法，可以輕鬆建立與 layout 一起使用的新功能。

最後，對於 layout，此變更允許我在 所有範例頁面的頂部新增一個選項，讓您可以選擇您想在其中看到範例的我們支援的樣式框架。

搜尋

強大的搜尋功能對於任何旨在顯示大量資料的函式庫都至關重要，而 DataTables 2 建立在 DataTables 現有的功能之上。

內建的標準「智慧」搜尋現在可以透過在搜尋詞前面新增驚嘆號 (!) 來執行否定搜尋。例如，在上面的表格中輸入「!London」以移除所有包含倫敦的列。此外，現在還有選項可完全比對字串 (對欄位搜尋很有用) 和邊界搜尋 (以協助在資料包含男性和女性等詞語時進行篩選)。

API 的搜尋功能 (search() 和 column().search()) 也針對自訂搜尋進行了改進。它們現在可以接受一個函式，該函式將對表格資料執行您自己的自訂搜尋邏輯，並直接接受正規表示式。

最後，對於搜尋，DataTables 2 透過三個新方法引入了固定搜尋詞的新概念

透過這些方法，您可以建立一個固定搜尋詞 (以給定的名稱索引)，該詞將與任何其他搜尋詞一起套用，直到被替換或移除為止。這使得建立自訂搜尋控制項 (以及針對 layout 的新功能註冊) 變得更加容易，因為您無需擔心搜尋詞衝突和覆蓋現有的詞語。

例如，您可以將以下事件處理常式和搜尋套用至 select 元素以篩選表格，同時讓內建的全域搜尋 input 可供終端使用者輸入自由格式搜尋詞

$('#mySelect').on('change', function () {
  table.search.fixed('select', $(this).val());
});

項目

DataTables 2 引入了一個新的 language.entries 選項，該選項用於自訂 DataTables 用於控制功能 (例如，分頁長度和資訊顯示元素) 的語言字串。雖然這是一個相對較小的變更，但當使用者可以掃描資料時，它可以大大提高表格對終端使用者的相關性，而不是看到通用的「項目」字串，他們可以立即看到表格包含的資料類型。

在上面的範例中，使用以下內容

language: {
    entries: {
        _: 'people',
        1: 'person'
    }
}

請注意，它也如何使用 i18n() 方法對複數形式的支援，因此如果僅顯示單一結果，則會將其稱為單數詞，而不是錯誤地使用複數形式。嘗試在上面的表格中搜尋唯一詞語以查看實際效果。

更多...

此部落格文章僅觸及 DataTables 2 新功能的表面。如需更多詳細資訊，請參閱

升級

想升級嗎？太棒了！這很容易做到。如果您使用 npm、yarn 或其他套件管理工具，請更新您的相依性以使用 DataTables 2 (^2 可能是要使用的最佳 semver 版本字串)。如果您使用我們的 CDN 或下載的套件，請使用下載產生器來建置新的 CDN 連結/下載套件 (如果您檢查目前建置的 Javascript 原始碼檔案，您會在頂部的註解中看到一個 URL，這將確保您獲得相同的軟體，只是最新的版本)。

如果您直接使用 DataTables (即 jquery.dataTables.js 檔案)，請注意此檔案的名稱已更新為簡稱 dataTables.js。同樣，核心樣式檔案名稱已更新，與其他樣式檔案名稱保持一致，並且是 dataTables.dataTables.css

CSS
JS

類別名稱

DataTables 用於其新增至表格的元素的類別名稱已更新為更一致且更合理 (與以前的版本不同！)。DataTables 1.x 的類別名稱會隨著時間的推移而累積，而且有點混亂。它們現在在命名方式上更加一致。它們將以 dt- 開頭，以表示它們是 DataTables 特有的。

如果您一直在使用舊的 DataTables 類別名稱進行自訂樣式設定，則需要更新 CSS 以使用新的名稱。

已移除

主要新版本的發佈是函式庫移除舊版程式碼和介面的機會，以保持函式庫的可管理性，尤其是在 Javascript 函式庫中，盡可能地小。這必須與回溯相容性的需求以及使軟體升級過程盡可能順利取得平衡。

考慮到這一點，DataTables 2 中有兩個主要的移除：舊版 API 和舊的 deferLoading 選項。

舊版的 API 已被 目前的 DataTables API 取代，該 API 於 2014 年隨著 DataTables 1.10 的發布而推出（回想起來，應該稱之為 DT2！）。它保留在程式碼庫中以允許升級，但自那時起就被標記為已棄用，並且僅記錄在舊版頁面上。舊版 API 很容易通過其所有方法上的 fn 前綴來識別，例如 fnDraw、fnAddData 等。

舊版 API 雖然是現代 API 的一個抽象層，但仍然佔用了大量的程式碼，現在已被移除。如果您使用了它，您現在必須將您的程式碼更新為現代 API。

另一個值得注意的移除是 deferLoading 選項，該選項允許 DataTables 跳過第一次繪製，前提是您已執行所有初始搜索和排序操作以顯示資料的第一頁。這在搜尋引擎無法執行 Javascript 的時代很有用，但它們早已過時，並且由於額外的設定複雜性，很少有 DataTables 安裝使用此選項。它還有許多邊緣案例（狀態儲存等），因此現在是時候將其移除了。

還有一些其他較小的移除，關於這些移除，請參閱 DataTables 2 的升級注意事項。

擴展版本

不僅 DataTables 從這個主要版本中受益，許多 DataTables 的擴展也已更新以利用其新功能，特別是多行標頭支援。

  • Buttons 3：現在完全支援多行和複雜的標頭和頁腳，用於導出資料。發行說明。
  • ColReorder 2：完全重寫，使程式碼庫現代化，使其更小巧且更易於管理。也完全支援多行和複雜的標頭/頁腳。發行說明。
  • FixedColumns 5：滾動時在固定列上顯示陰影，以幫助視覺分離。也支援多行和複雜的標頭/頁腳。發行說明。
  • FixedHeader 4：支援多行和複雜的標頭/頁腳。發行說明。
  • Responsive 3：與其他擴展一樣，Responsive 現在也完全支援多行和複雜的標頭/頁腳。它還引入了一個新的渲染器，該渲染器將重複使用 DOM 元素，而不是為詳細資訊顯示創建新元素。發行說明。
  • Select 2：引入了使用真實複選框選擇行的支援，而不是 CSS 繪製的複選框，以幫助提高可訪問性。還提供在複選框列中選擇全部/無的選項。發行說明。

其他擴展也已更新，以確保與 DataTables 2 的完全相容性。

與 DataTables 核心一樣，請使用您的套件管理器（npm、yarn 等）或下載生成器，以確保您從 DataTables 軟體套件中取得最新版本。

完整升級注意事項

這不是一個完整的變更列表，而只是重點。有關完整詳細資訊，請參閱

支援

DataTables 1.x 現在被視為生命週期結束。如果需要，將會發布修補程式版本，但是，所有開發重點都放在 DataTables 2+ 上，並且不會將任何新功能引入到 1.x，也不會進行反向移植。這同樣適用於需要 DataTables 2+ 的擴展，而其他與 DataTables 1 和 2 一起運行的擴展將特別關注 DataTables 2，並會在某個時候停止對 DataTables 1 的支援（當發生這種情況時，它們將會獲得主要版本升級）。

商業支援服務將繼續涵蓋 DataTables 1.13 作為先前的次要版本，直到 DataTables 2.1 發布為止。但是，在論壇中提供的免費支援將把重點轉移到 DataTables 2，如果您在舊版本中遇到問題，將會鼓勵您升級。

瀏覽器

廣泛的瀏覽器支援對於像 DataTables 這樣的函式庫非常重要。您希望能夠選擇一個函式庫，並知道它可以在客戶將使用的瀏覽器上正常運作，而無需擔心相容性。以前，我將 DataTables 的每個次要版本（semver 意義上的次要版本，其中一些例如 1.10 是重大升級！）的基準設定為特定版本的 Internet Explorer（6、8、11 等）。

自 DataTables 首次問世以來，瀏覽器環境已經發生了變化 - IE 早已過時，並且瀏覽器會定期自動更新，因此您知道大多數客戶將擁有最新和最好的功能。「大多數」很重要，瀏覽器版本的長尾效應仍然可能產生影響（使用舊作業系統的電腦、舊版平板電腦等），而且如上所述，您希望確保您使用的函式庫具有廣泛的瀏覽器支援。

為此，DataTables 的瀏覽器支援現在適用於每個 DataTables 次要版本系列發布日期前 10 年發布的主要瀏覽器。

jQuery

DataTables 2 只有一個依賴項 - jQuery。它使用 jQuery 作為 DOM 抽象和事件處理函式庫。就像 DataTables 用作處理 HTML 表格的函式庫一樣，它使用 jQuery 來大幅簡化與 DOM 和事件的互動。如果沒有使用 jQuery，我將需要編寫類似的 DOM 抽象，這只會浪費核心 DataTables 開發的時間，而且我認為這不太可能顯著減少程式碼大小，尤其是使用 jQuery slim 和即將發布的 jQuery 4 版本時。jQuery 是一個經過實戰檢驗的函式庫，也是 DataTables 能夠提供如此廣泛的瀏覽器支援的重要原因。

要明確說明的是 - 您不需要編寫任何 jQuery 程式碼即可使用 DataTables。我們所有的範例現在都有 Vanilla JS 和 jQuery 執行時程式碼，向您展示如何使用任一方法。參考文件重點介紹 Vanilla JS。

未來

軟體很少被認為是「完成」的，而 DataTables 遠未達到那個階段。我對 DataTables 及其擴展有廣泛的計畫，包括改進的列控制、篩選選項、效能、與 React 的整合等等。實際上，我已經記錄了 DataTables 3 功能的票證！請關注此部落格（RSS 源）或 DataTables BlueSky 帳戶，以了解最新動態。

我自 2008 年以來一直在開發 DataTables，現在 16 年後，我對它所取得的成就和圍繞它發展的社群感到高興和自豪。我最大的願望是繼續迭代和開發 DataTables，以滿足使用它的開發人員的需求。我歡迎您對 DataTables 2 和一般方面的回饋 - 請隨時在論壇中創建一個主題，以討論您可能有的任何想法、問題或回饋。

頁面導航

DataTables

DataTables 由 SpryMedia Ltd 設計和創建。
© 2007-2024 MIT 許可。隱私權政策。支持者。
SpryMedia Ltd 在蘇格蘭註冊，公司編號為 SC456502。