從 1.10+ 版本升級至 DataTables 2

DataTables 2 是一個主要版本,相較於 1.x 系列,有許多變更、增強和改進。其中也有一些項目被移除或更新,這些項目將在本文件中重點說明。

它是詳細說明 DataTables 2 發布的相關文件之一

對於像 DataTables 這樣的函式庫來說,向後相容性非常重要,因此我們投入了大量精力,以確保 v2 的中斷性變更盡可能少,但如下所述,仍然有一些變更。

請注意,這並非所有細微變更的詳盡清單。如需完整清單,請參閱發行說明

已更新

檔案名稱

如果您是透過 script 標籤直接載入 DataTables,請注意核心 DataTables 檔案已將名稱從 jquery.dataTables.js 變更為 dataTables.js。DataTables 的預設 CSS 檔案也已更新,使其命名與樣式整合檔案一致,現在稱為 dataTables.dataTables.css

CSS
JS

如果您使用下載建構器來建立組合檔案、下載套件或使用 NPM / Yarn,則無需擔心此問題。它將全部自動處理。只有在您參考 jquery.dataTables.js 的情況下,才需要更新您的包含檔案。

dom 屬性

此屬性在 DataTables 1.x 中用於將控制和資訊元素放置在表格周圍。它很靈活,但也很難使用,尤其是在與 Bootstrap 等樣式函式庫一起使用時,通常會導致非常長的字串難以操作。

DataTables 2 引入了新的 layout 選項,以便以獨立於樣式的方式,更輕鬆地進行版面配置。這個新屬性有效地使 dom 變得多餘,因為兩者不能一起使用。然而,dom 是 DataTables 中使用最廣泛的參數之一,因此我不想完全放棄它。

dom 在 DataTables 2 中仍然可用(很可能會在 v3 中被放棄!),但 DataTables 的預設 CSS 已針對 layout 進行更新,並且不包含 dom 的樣式。如果您需要繼續使用 dom,您可能需要新增一些 CSS 來根據需要放置元素。但是,強烈建議您更新為使用 layout

類別名稱

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

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

除了更新類別名稱之外,DataTables 用於儲存類別名稱的物件結構也已更新,使其更易於管理。此物件結構由 DataTables 的各種樣式整合使用,現在也被視為公用 API 的一部分,讓您可以輕鬆地在需要時變更類別名稱。

您可以在此處找到 DataTables 使用的預設類別名稱。若要自訂,請透過 DataTables.ext.classes 存取。

延遲渲染

長期以來,DataTables 一直能夠透過其 deferRender 選項延遲建立表格主體的 DOM 元素,直到它們需要顯示時才建立。這具有顯著的效能影響,尤其是在使用 Ajax 載入的資料時,因為這表示 DataTables 不需要建立 DOM 節點,直到它們用於目前顯示的頁面時才建立。基於此原因,在 DataTables 2 中,deferRender 的預設值已變更為啟用 (true)。

這會對假設已建立表格主體節點的程式碼產生影響。如果您透過 API 對表格執行 DOM 操作,則可能必須更新您的程式碼以考慮這一點。可以透過將 deferRender: false 新增到 DataTable 的初始化選項來還原 v1 行為。

使用空字串進行 Ajax 載入

如果提供空字串,則已更新 ajax 選項(或如果用作物件則為 ajax.url)以不發出請求。先前,它會呼叫文件的 URL。如果您需要該行為,請使用 ajax: window.location.pathname

明確的標籤/輸入

如果可能,搜尋和頁面長度選單現在將使用明確的 label / input|select 配對(即,輸入位於字串的開頭或結尾)。這樣做是為了幫助提高輔助功能,尤其是對於不總是支援先前使用的隱式配對的螢幕閱讀器。

language.searchlanguage.lengthMenu 是控制此行為的字串。如果兩者的輸入元素位於字串的開頭或結尾,則將使用明確的連結。如果它位於字串中間,則將使用隱式連結。

因此,language.lengthMenu 的預設值已從 Show _MENU_ entries 更新為 _MENU_ _ENTRIES_ per page

穩定排序

DataTables 中的排序現在是 100% 確定性的。先前,列的順序可能取決於先前已套用至表格的排序(僅在列具有匹配的排序資料時才會注意到)。資料順序現在會重設為原始載入順序,然後再將每個排序操作套用至資料,以解決此問題。

排序順序

當透過按一下其標頭元素對列進行排序時,在 v1 中,它只會在列的升冪和降冪排序之間切換(可透過 columns.orderSequence 選項控制)。DataTables 2 為此參數引入了一個新選項,即表示不排序的空字串值。預設值已更新為利用此選項,並且現在按一下標頭儲存格時套用的排序順序為

  • 升冪
  • 降冪
  • 不排序

當按一下列標頭時,它會無限期地重複該順序。與之前一樣,可以使用 columns.orderSequence 選項進行控制,如果您希望還原 DataTables 1.x 的預設行為,則可以透過設定預設值來執行此操作

DataTable.defaults.column.orderSequence = ['asc', 'desc'];

範例

此網站上的範例已全部更新,使其能夠透過我們任何支援的樣式函式庫進行主題化。這透過新的 layout 選項實現,該選項允許新增按鈕和 SearchPanes 等功能,而無需使用樣式特定的 dom 字串。

所有範例也可以顯示和執行包含或不包含 jQuery 的初始化(預設不包含),並且對於支援的主題,可以啟用深色或淺色模式。

最後,這些範例都已使用 Prettier(實際上,特別是 Prettier More)進行格式化,以提供一致的程式碼樣式。

文件

參考文件中的程式碼片段已更新,以著重於非 jQuery 初始化。具體來說,DataTables 現在使用全域 DataTable 物件存取,例如,先前的範例可能是

$('#myTable').DataTable({
    scrollX: true
});

現在將會是

new DataTable('#myTable', {
    scrollX: true
});

兩種形式仍然都能運作!此變更主要是因為 ES Modules 的使用日益增加,在這種情況下,DataTable 物件的導入不再需要同時導入 jQuery。

已移除

舊版 API

DataTables 過去會使用 DataTables 特定的方法擴充從 $().dataTable() 返回的 jQuery 物件,例如 fnDrawfnGetData 等(它們都有 fn 前綴)。當 DataTables 1.10 引入一個全新的可鏈式 API 時,這個 API 就成了舊版且被棄用的 API。DataTables 2 完全移除了舊版 API。如果您正在使用任何舊版的 fn* 方法,您需要更新它們。

deferLoading 選項

這個選項在 DataTables 1.x 中可用,目的是阻止 DataTables 在初始啟動時替換 HTML 表格的內容。它最初被加入 DataTables 中,是為了讓搜尋引擎能夠在無需執行 Javascript 的情況下檢索表格的資料。由於所有搜尋引擎都可以執行 Javascript 來載入 Ajax 資料,這個問題早已不再是問題。由於它為 DataTables 的程式碼路徑增加了相當大的複雜性和間接性,因此已被移除。

pagingTag 選項

此選項存在於較晚的 1.x 版本中,目的是幫助改進可訪問性。最初,DataTables 使用 a 標籤來顯示分頁按鈕,但 button 標籤在可訪問性方面更佳。pagingTag 在 1.x 版本中可用,允許使用按鈕,而無需變更預設值。DataTables 2 藉此機會將分頁按鈕更新為 button 元素,因此這個選項不再相關。

stripeClasses 選項

DataTables 1.x 會將 oddeven 類別新增至表格中的每一列,以允許表格的條紋樣式。由於 CSS 的 :nth-child 選擇器支援相同的能力,這早已變得多餘。此選項已被移除,表格的列條紋現在僅由 CSS 完成。

搜尋選項中的 escapeRegex 選項

自 1.10 版本以來,此屬性一直沒有被記錄,但由於舊版原因而存在。請使用 DataTables.SearchOptions 物件的 regex 選項來控制是否應將字串視為正規表示式字串。

concat() 方法

這方法非常簡單地被破壞,且行為與文件描述不符。因此,我決定將其移除,因為它不太可能被使用,而且會為 DataTables 增加額外的程式碼來修復。

error 事件

舊的 error 事件不幸地觸發了 window.onerror DOM0 的捕獲所有錯誤的動作,純粹是因為它的命名。這是不可取的,因此該屬性已重新命名為 dt-error。它的行為仍然相同,如果您確實想要觸發 window.onerror,請設定 DataTable.ext.errMode = 'throw';