DataTables 1.10 新功能
DataTables 1.10 是為了改善您(開發人員)使用 DataTables 以及終端使用者使用您所建立的表格的體驗而投入大量工作的成果。
主要新功能
DataTables 1.10 推出了一些令人興奮的新功能,包括
全新 API
這是 DataTables 自最初發布以來最大的變更!DataTables 1.10 中提供了一個全新的 API,其中包含大量可用的方法。基於多年的經驗,並了解舊的 API 通常用於哪些用途,新的 API 具有現代化、深思熟慮、簡潔、簡單且具表達力的特性。
可以透過建構函式存取新的 API
var table = $('#myTable').DataTable();
(請注意 DataTable
中大寫的 D)。小寫的 d 將傳回一個 jQuery 物件,其中擴充了 DataTables 1.9 的 API 方法。這個新的 API 完全向下相容,並且可以繼續使用舊的 API。但是,強烈建議您盡可能使用新的 API(您會更喜歡它的!)。
手冊詳細說明了新的 API 以及如何使用它。
駝峰式命名法
舊版本的 DataTables 對其公開 API 使用匈牙利命名法。這與 Javascript 社群的其餘部分非常不協調,並且是採用上的重大阻力。在 1.10 中,DataTables 現在接受駝峰式命名法和原始匈牙利命名法作為參數,其中駝峰式命名法是首選的、並且是有文件記錄的選項。與 API 一樣,此變更完全向下相容。
提供了一個指南,展示了匈牙利命名法對應的駝峰式命名法,包括命名和 API 慣例更新,如果您想了解如何使用新的命名方案。
新網站
無論函式庫的實際功能如何,文件都是軟體函式庫的關鍵功能。雖然 DataTables 文件對於開源函式庫來說一直都相當不錯,但目標是讓文件盡可能做到最好,而不僅僅是不錯而已。為此,DataTables 網站已完全重新設計,並且大部分文件已針對 DataTables 1.10 重新編寫和完全更新。該網站現在主要分為:
還有許多其他部分,例如範例、附加功能和外掛程式,但手冊和參考是 DataTables 文件的重要基石。
現在許多頁面還具有發布評論的功能,因此您可以與其他使用 DataTables 的開發人員分享有用的資訊。
新樣式表
DataTables 樣式表已完全重新編寫,為您的表格提供現代化的外觀,它具有豐富的功能且易於自訂。DataTables 樣式表透過指派給 DataTable 的類別名稱提供許多樣式選項。此外,現在還提供線上樣式自訂工具,可讓您透過簡單的 Web 介面變更表格的欄位配置。
在新網站中,使用Bootstrap、Foundation 和jQuery UI 設定樣式的相關文件也已完整記錄,並且是 DataTables 未來發展的重要組成部分。
其他功能
除了上述主要變更之外,DataTables 1.10 中還有許多新的、較小的但同樣重要的功能。
內建分頁改進
內建的分頁控制項已擴充,以在數字之間存在不連續性時顯示省略符號,以視覺方式向最終使用者呈現數值間隔。這是為了幫助使用者更易於存取所顯示的資料。內建的分頁選項也已擴充為包含四個選項:
simple
- 僅有「上一頁」和「下一頁」按鈕simple_numbers
- 「上一頁」和「下一頁」按鈕,加上頁碼full
- 「第一頁」、「上一頁」、「下一頁」和「最後一頁」按鈕full_numbers
- 「第一頁」、「上一頁」、「下一頁」和「最後一頁」按鈕,加上頁碼
如需更多資訊,請參閱pagingType
。
HTML 5 data-*
屬性支援
正交資料是任何複雜表格的重要組成部分,它能夠對同一資料的不同表示形式執行不同的操作。DataTables 1.10 提供了使用 HTML 5 data-*
屬性來提供正交資料進行處理的功能。提供了一個範例來說明。
改進的內建排序和類型偵測
在此版本中,DataTables 自動偵測和排序不同資料類型的能力已擴充,以包含 1.10 之前最常新增的外掛程式。具體來說,DataTables 現在可以偵測和排序:
- 格式化的數值資料(例如:
1,200
) - 貨幣資料(例如:
$3,500
) - 百分比資訊(例如:
95%
) - 包含 HTML 包裝的數值資料(例如:
<span>4,500</span>
)
許多排序外掛程式仍然非常有用,但 DataTables 的這種擴充能力將意味著絕大多數情況下都需要新的外掛程式。
效能
軟體函式庫的關鍵面向之一始終是效能。此 DataTables 版本由於許多內部變更(透過移除 fnRender
而實現 - 請參閱下文),顯著提高了大型資料集的效能。
更輕鬆的 Ajax 處理
在 1.10 中,透過新的 ajax
屬性,DataTables 中可設定的 Ajax 功能得到了大幅改進。這個新選項可以以物件的形式給定,該物件將直接對應到 DataTables 用於從伺服器請求資料的 jQuery Ajax 物件,從而提供jQuery.ajax 選項的完整陣列。例如,要發出 POST 請求:
$('#myTable').DataTable( {
ajax: {
url: '/data',
type: 'POST'
}
} );
結合新的ajax.reload()
和ajax.url()
方法,在 DataTables 1.10 中,Ajax 資料的使用變得更加容易。
從右至左的版面配置支援
DataTables 現在支援使用 CSS 中的 direction: rtl
選項進行版面配置的文件。某些瀏覽器會以這種方式配置時在捲動容器的左側顯示捲軸,這在之前會導致問題,但現在 DataTables 1.10 中已完全支援。
已移除
上述改進是透過移除 DataTables 1.9 的三個功能而實現的,這些功能在 1.9 中已棄用,並計畫在 1.10 中移除。
fnRender
舊的 fnRender
選項提供了一種在建立儲存格時操作儲存格的方法。但是,它以令人困惑的選項清單作為參數提供,並且在 DataTables 內部需要特定的結構,這導致了效能問題。移除 fnRender
已顯著提高了 DataTables 在使用大型資料集時的效能,並且能夠將物件執行個體作為資料來源物件提供給 DataTables(例如,Knockout 可觀察的物件)。
取代 fnRender
,可以使用columns.render
和columns.createdCell
選項,它們提供了更大的彈性和更一致的介面。
bScrollInfinite
由於 bScrollInfinite
選項在 API 中造成的不一致,DataTables 1.9 顯示無限捲動網格的內建功能已移除。移除也顯著簡化了內部程式碼。
建議使用 DataTables 的Scroller 附加功能來取代 bScrollInfinite
。
基於 Cookie 的狀態儲存
在 DataTables 1.10 中,基於 Cookie 的狀態儲存已取代為基於 localStorage
的狀態儲存。Cookie 的 4KiB 限制非常有限,並且由於它們是每個 HTTP 請求的一部分,因此會產生效能損失。localStorage
速度更快且更具彈性,並且在 DataTables 1.10 中用作狀態資訊的預設儲存方式。
localStorage
在 IE6/7 中不可用。因此,DataTables 的內建狀態儲存在這些瀏覽器中不可用,在這些瀏覽器中,狀態儲存會以無訊息方式失敗。如果您希望使用 Cookie,可以使用stateLoadCallback
和stateSaveCallback
參數來提供適當的函式。
相關文件
本文件包含關於新功能的概略資訊,更詳細的升級至 1.10 個別主題資訊,請參閱以下文件: