DataTables 1.8 新功能

DataTables 1.8 建構於先前版本的基礎之上,擴展了 DataTables 的功能,使其對於您(開發人員)而言更具彈性,同時也朝著未來發展。雖然最終使用者介面沒有太多變更,但您會發現,某些變更使 DataTables 的使用更具彈性和樂趣。

主要新功能

  • 擴展的資料來源選項
    • 使用物件的伺服器端處理示範 | 使用物件的 Ajax 來源示範 | 使用子陣列的物件示範 | 深度資料來源示範
    • 先前在使用 Ajax 時,DataTables 需要表格的簡單 2D 資料陣列,並對長度有嚴格的要求。DataTables 1.8 現在允許您提供一個物件陣列(或仍然是陣列),其中包含您想要的任何數量的屬性。若要存取欄位的屬性,請針對目標欄位使用 mDataProp 選項。這可以是陣列索引的整數(預設值)或物件屬性的字串。此外,您可以在字串中使用點狀物件表示法來指定巢狀物件(任何深度) - 例如「object.prop」。這對於儲存中繼資訊(例如詳細資料列(fnOpen)或資料庫 ID)非常有用。
  • 複雜標頭
    • 具有隱藏欄位的 Colspan 示範
    • 1.8 引入了超級彈性的欄標頭和表格頁尾支援。先前,在任何位置具有 colspan/rowspan 的標頭不支援欄的可見性,但現在您可以群組欄並根據需要顯示/隱藏它們。這與核心緊密整合,因此允許 ColVis 擴充套件和其他擴充套件能夠「正常運作」於複雜標頭。
  • 效能
    • 延遲渲染示範
    • 在使用 Ajax 或 JavaScript 來源資料時,現在可以選擇延遲(將 bDeferRender 設定為 true,預設值為 false)表格列和儲存格 DOM 元素的建立,直到它們實際需要在給定的頁面繪製中使用時。因此,這在初始化期間提供了巨大的速度提升,因為您的瀏覽器不需要為表格建立節點。這允許 Ajax 來源表格輕鬆處理數千列。請注意,這對 DOM 來源資料沒有影響,而且伺服器端處理仍然可以處理數百萬列。
  • 漸進式增強(表格主體中的 TH 元素)
    • 在 DataTables 1.8 中,現在可以在表格的 TBODY 中使用 TH 元素,從漸進式增強的角度來看,這非常重要,因為 TH 元素具有語義含義,此外,它還可以更輕鬆地使用 CSS 選擇器來設定表格的樣式。

開發人員增強功能

  • 自動新增列 ID 和類別
    • 自動新增 ID 示範
    • 在使用非 DOM 來源資料(例如伺服器端處理)時,直接將 ID 或類別名稱新增至列通常會很有用。DataTables 現在提供了選項,可以通過將 DT_RowId 和/或 DT_RowClass 指定為用於列資料來源的物件的一部分,自動將 ID 和/或類別新增至每一列。
  • Ajax 來源資料屬性組態
    • Ajax 自訂屬性資料來源示範
    • 在取得 Ajax 資料以用於 Ajax 來源資料或伺服器端處理時,您現在可以使用 sAjaxDataProp 屬性來指定您希望 DataTables 讀取表格資料的參數(先前硬式編碼為 aaData)。此外,當使用 Ajax 來源資料(非伺服器端處理)時,此選項可以設定為空字串,這會告知 DataTables 您將直接提供陣列,而不是讓它需要讀取物件的屬性。
  • 空欄位
    • 空資料來源示範
    • 在某些表格中,不需要為欄位指定任何資料來源會很有用,因為其內容會自動產生(例如使用 fnRender)。這在 CRUD 介面的新增、編輯和刪除欄位中相當常見。您現在可以使用 mDataProp 設定為 null 來指定欄位沒有資料來源。DataTables 將把此欄位渲染為空白。
  • 協助工具
    • 延遲載入示範
    • 在使用伺服器端處理時,表格必須做的第一件事是向伺服器發出請求以取得新資料。當 bDeferLoading 選項設定為 true(預設值為 false)時,不再需要這樣做。這樣做的好處是,您可以通過將第一個顯示集直接插入 HTML 中來提高表格的協助工具,而 DataTables 將在此基礎上建構。
  • 單元測試
    • 由於 DataTables 中引入了資料來源選項的擴展選項,因此保持單元測試套件的最新狀態非常重要。所有新的初始化參數都有單元測試,並且測試套件現在包含 2500 多個測試。因此,您可以放心,DataTables 非常可靠。
  • fnGetData 擴展
    • API 方法 fnGetData 現在有一個額外的選項來取得個別儲存格的資料。僅使用一個參數時,fnGetData 會取得給定列的原始資料物件(無論該物件是什麼,以及新的擴展資料來源選項)。使用兩個參數時,fnGetData 將透過從您的資料來源物件中讀取資料(就像在表格顯示中所做的那樣),來取得給定列/欄的資料。
  • 詳細資料列更加靈活
    • 透過允許將 jQuery 物件、DOM 元素或 HTML 字串傳遞給 fnOpen(作為第二個參數),使其能夠插入新建立的列中,進而使 fnOpen 更具彈性。

除了所有這些新功能之外,還有大量的錯誤修復和內部更新。若要閱讀完整的版本說明,請查看版本說明