2024 年 7 月 19 日,星期五
作者:Allan Jardine

DataTables 2.1

時光飛逝!感覺 DataTables 2.0 的重大發佈 似乎才沒過多久,但實際上已經過了四個月。在那段時間裡,2.0.x 版本發布了八個修補程式版本,調整了一些小細節並解決了發現的錯誤。現在是時候推出 DataTables 2.1 了,它在 2.0 的基礎上進行了許多新功能和改進。

這篇部落格文章是詳細介紹 2.1 版本的一系列文件的一部分

這篇部落格文章將總結此版本 - 有關更多詳細資訊,請參閱其他文件。

讓我們看一下 2.1 的一些新功能,請參考下面的表格

名稱 連結 喜歡

首先,您可能會注意到表格上方的三個功能元素在單行上均勻間隔。這只需使用 layout 選項,並將我們想要放在該行中的功能設定在陣列中即可完成

layout: {
    top: [
        'pageLength',
        'buttons',
        'search'
    ]
}

在 2.1 之前,預設的 CSS 會將每個功能渲染在其自己的行上。現在,layout 全寬單元格中的功能將沿著該行均勻間隔。StartEnd 單元格也受益於此更改,並允許在單行上顯示多個功能。這裡有更詳細的範例

其次,如果您點擊按鈕,您將會收到一個 alert,顯示各欄的資料類型。您可能會注意到第一欄有一個新的資料類型:string-utf8,這會導致 DataTables 使用 localeCompare 對資料進行排序,以確保正確排序帶有重音符號的字元。您還可以注意到 FontAwesome 欄不是 numeric,而 2.0 會錯誤地將其識別為數字。此修復歸功於 DataTables 資料類型檢測能力的顯著改進。

最後,對於此範例,如果您查看表格的 HTML,您會看到該表格只是 <table id="blog-2-1" class="display">。在所有先前的 DataTables 版本中,您很可能必須添加 style="width:100%",以確保表格響應頁面上的寬度更改。

要讓世界為之沸騰嗎?

當然,次要版本中的這些小變更不會讓世界為之沸騰,但它們是一些小的便利之處,使使用 DataTables 更加容易。將所有這些小的便利加在一起,就會變成一個更加令人愉悅的函式庫!

還有其他新功能,例如完全支援 Bulma 1.0(包括暗黑模式)以及用於 ESM 環境的新 DataTable.use() 方法。有關所有新增、變更和修復的完整詳細資訊,請參閱 發布說明

升級

升級到 2.1 只是更新 DataTables JS 和 CSS 檔案的問題

  • 如果您使用 npm / yarn,請在 datatables.net* 套件上執行升級
  • 如果您使用我們的 CDN,請從下載產生器取得最新的來源
  • 如果您託管下載的檔案,您也可以從下載產生器取得最新的檔案。

從 2.0 移至 2.1 時,您不太可能遇到升級問題,但是還是值得查看升級說明以確保安全。如果您的自訂 CSS 影響了 layout 網格,則可能會影響視覺效果的最大變更是將單元格中的功能放置在一行上的變更。任何自訂 CSS 都可能需要更新或移除。

如果您尚未嘗試過 DataTables 2,請參閱其發布部落格文章

一如既往,我希望您喜歡使用 DataTables。歡迎在論壇中提出意見反應