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 提供的每個選項、API 方法和事件的詳細資訊

還有許多其他部分,例如範例附加功能外掛程式,但手冊和參考是 DataTables 文件的重要基石。

現在許多頁面還具有發布評論的功能,因此您可以與其他使用 DataTables 的開發人員分享有用的資訊。

新樣式表

DataTables 樣式表已完全重新編寫,為您的表格提供現代化的外觀,它具有豐富的功能且易於自訂。DataTables 樣式表透過指派給 DataTable 的類別名稱提供許多樣式選項。此外,現在還提供線上樣式自訂工具,可讓您透過簡單的 Web 介面變更表格的欄位配置。

在新網站中,使用BootstrapFoundationjQuery 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.rendercolumns.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,可以使用stateLoadCallbackstateSaveCallback參數來提供適當的函式。

相關文件

本文件包含關於新功能的概略資訊,更詳細的升級至 1.10 個別主題資訊,請參閱以下文件: