DataTables 1.12
我非常榮幸地宣布 DataTables 1.12 的發布。這是一個漸進式的升級，使我們的預設樣式許多部分現代化，並顯著提高了國際化能力。
簡要概述，在這篇文章中，我將介紹 DataTables 中的以下增強功能
- 內建日期/時間呈現和排序
- 數字的自動地區設定呈現
- 排序樣式改進
- 列著色改進
隨著 DataTables 的發布，我們還更新了我們所有的擴充功能，以確保完全相容性、提供他們的新功能並解決已知的問題。請參閱本文末尾，以取得所有已發布軟體的完整發行說明連結。
此外，此版本標誌著我們對 DataTables 的 IE6 和 IE7 支援結束。雖然 Javascript 尚未移除對這些瀏覽器的支援 (並且在 DataTables 2 之前不會移除)，因此它仍然可以在它們中大致運作，但現在已移除這些舊版瀏覽器的任何 CSS hack，因此我們只會分發完全有效的 CSS。
即時範例
讓我們看看 DataTables 1.12 的實際運作 - 任何使用過 DataTables 的人都會立即感到熟悉
| 姓名 | 辦公室 | 開始日期 | 薪水 |
|---|---|---|---|
| Tiger Nixon | 愛丁堡 | 2011-04-25 | 320800 |
| Garrett Winters | 東京 | 2011-07-25 | 170750 |
| Ashton Cox | 舊金山 | 2009-01-12 | 86000 |
| Cedric Kelly | 愛丁堡 | 2012-03-29 | 433060 |
| Airi Satou | 東京 | 2008-11-28 | 162700 |
| Brielle Williamson | 紐約 | 2012-12-02 | 372000 |
| Herrod Chandler | 舊金山 | 2012-08-06 | 137500 |
| Rhona Davidson | 東京 | 2010-10-14 | 327900 |
| Colleen Hurst | 舊金山 | 2009-09-15 | 205500 |
| Sonya Frost | 愛丁堡 | 2008-12-13 | 103600 |
| Jena Gaines | 倫敦 | 2008-12-19 | 90560 |
| Quinn Flynn | 愛丁堡 | 2013-03-03 | 342000 |
| Charde Marshall | 舊金山 | 2008-10-16 | 470600 |
| Haley Kennedy | 倫敦 | 2012-12-18 | 313500 |
| Tatyana Fitzpatrick | 倫敦 | 2010-03-17 | 385750 |
| Michael Silva | 倫敦 | 2012-11-27 | 198500 |
| Paul Byrd | 紐約 | 2010-06-09 | 725000 |
| Gloria Little | 紐約 | 2009-04-10 | 237500 |
| Bradley Greer | 倫敦 | 2012-10-13 | 132000 |
| Dai Rios | 愛丁堡 | 2012-09-26 | 217500 |
| Jenette Caldwell | 紐約 | 2011-09-03 | 345000 |
| Yuri Berry | 紐約 | 2009-06-25 | 675000 |
| Caesar Vance | 紐約 | 2011-12-12 | 106450 |
| Doris Wilder | 雪梨 | 2010-09-20 | 85600 |
| Angelica Ramos | 倫敦 | 2009-10-09 | 1200000 |
| Gavin Joyce | 愛丁堡 | 2010-12-22 | 92575 |
| Jennifer Chang | 新加坡 | 2010-11-14 | 357650 |
| Brenden Wagner | 舊金山 | 2011-06-07 | 206850 |
| Fiona Green | 舊金山 | 2010-03-11 | 850000 |
| Shou Itou | 東京 | 2011-08-14 | 163000 |
| Michelle House | 雪梨 | 2011-06-02 | 95400 |
| Suki Burks | 倫敦 | 2009-10-22 | 114500 |
| Prescott Bartlett | 倫敦 | 2011-05-07 | 145000 |
| Gavin Cortez | 舊金山 | 2008-10-26 | 235500 |
| Martena Mccray | 愛丁堡 | 2011-03-09 | 324050 |
| Unity Butler | 舊金山 | 2009-12-09 | 85675 |
| Howard Hatfield | 舊金山 | 2008-12-16 | 164500 |
| Hope Fuentes | 舊金山 | 2010-02-12 | 109850 |
| Vivian Harrell | 舊金山 | 2009-02-14 | 452500 |
| Timothy Mooney | 倫敦 | 2008-12-11 | 136200 |
| Jackson Bradshaw | 紐約 | 2008-09-26 | 645750 |
| Olivia Liang | 新加坡 | 2011-02-03 | 234500 |
| Bruno Nash | 倫敦 | 2011-05-03 | 163500 |
| Sakura Yamamoto | 東京 | 2009-08-19 | 139575 |
| Thor Walton | 紐約 | 2013-08-11 | 98540 |
| Finn Camacho | 舊金山 | 2009-07-07 | 87500 |
| Serge Baldwin | 新加坡 | 2012-04-09 | 138575 |
| Zenaida Frank | 紐約 | 2010-01-04 | 125250 |
| Zorita Serrano | 舊金山 | 2012-06-01 | 115000 |
| Jennifer Acosta | 愛丁堡 | 2013-02-01 | 75650 |
| Cara Stevens | 紐約 | 2011-12-06 | 145600 |
| Hermione Butler | 倫敦 | 2011-03-21 | 356250 |
| Lael Greer | 倫敦 | 2009-02-27 | 103500 |
| Jonas Alexander | 舊金山 | 2010-07-14 | 86500 |
| Shad Decker | 愛丁堡 | 2008-11-13 | 183000 |
| Michael Bruce | 新加坡 | 2011-06-27 | 183000 |
| Donna Snider | 紐約 | 2011-01-25 | 112000 |
功能
內建日期/時間呈現和排序
在 DataTable 中顯示的最常見資料類型之一是日期和時間資訊。我們長期以來對 ISO8601 資料提供完整的內建支援，但格式化的日期和時間需要外掛程式。現在不需要了！現在可以使用新的 DataTable.render.date() 輔助函式和 DataTable.datetime() 函式來顯示格式化的日期並分別註冊格式化的日期。
地區設定格式
將日期和時間載入到 DataTable 中時，我們建議_線路資料_ (即由 Ajax 載入或從 HTML 讀取的資料) 採用 ISO8601 格式。新的 DateTable.render.date() 輔助工具可以使用 columns.render 指定給日期欄，它會自動將其格式化為您的最終使用者可以識別的格式 (例如，美國為 MM/DD/YYYY，英國為 DD/MM/YYYY 等 - 這會通過您的 瀏覽器 API 全球運作)。
例如，您可能會使用
$('#example').DataTable({
columnDefs: [
{
target: 4,
render: DataTable.render.date(),
},
],
});
即時範例.
這不需要任何外部函式庫。如果您想要將瀏覽器的地區設定格式覆寫為自訂格式，也可以使用此輔助工具來完成，但您需要在您的頁面上提供 Moment.js 或 Luxon。
自訂格式
當然，您的資料可能已經格式化。若要指示 DataTables 如何理解這些格式，請使用 DataTable.datetime() 函式，傳遞 Moment 或 Luxon 格式字串以向 DataTables 註冊格式 (從而允許對資料進行正確排序)。
DataTable.datetime('D MMM YYYY');
$(document).ready(function () {
$('#example').DataTable();
});
即時範例.
請注意，在這種情況下，您的頁面上必須有 Moment 或 Luxon 才能註冊自訂格式，而且您應該使用您所使用函式庫的確切格式字串 (它們使用的格式略有不同)。
完整範例集
我們有一個新的日期/時間處理範例類別，您可以在這裡找到。
數字的自動地區設定呈現
與日期格式類似，世界各地數字顯示的常見格式並非只有一種 (維基百科全球使用標準的地圖)。為了讓您的數值資料對每個人都容易理解，而無需您在每個地區設定上進行自訂組態，我們的 DataTable.render.number() 已更新為執行自動偵測。
您現在可以使用指派給 columns.render 的 DataTable.render.number() 來進行完全自動的數字格式化
$('#example').DataTable({
columnDefs: [
{
target: 5,
render: DataTable.render.number(),
},
],
});
即時範例.
這是通過 Intl.NumberFormat API 完成的，所有 IE11 及更新版本的瀏覽器都提供該 API。
排序樣式改進
如果您將本頁頂端的範例表格與v1.11 樣式的表格進行比較，您會發現排序圖示已變更。以前，我們使用 png 背景圖片來表示表格的排序狀態。在 1.12 中，我們已移除這些圖片，並以 UTF8 圖示取而代之，這些圖示使用偽元素放置在標題中。這使得控制圖示、它們的顏色和其他樣式方面變得更加容易，因為現在不需要更新圖片，只需新增幾行 CSS 即可進行自訂。
此變更已傳播到我們在 DataTables 中支援的樣式框架 (例如 Bootstrap、FomaticUI 等)，為輕鬆設定樣式提供了一致的整合。預設樣式與支援的樣式框架搭配使用效果非常好。
列著色改進
如果您曾經嘗試在 DataTables 中的表格儲存格或列新增背景顏色，您可能會很快遇到條紋列、順序醒目標示列、FixedColumns 等的顏色問題。最初看起來像是一個簡單的任務，可能會根據您使用的功能快速變成密集的 CSS。這是因為 DataTable 用於條紋列等的列著色是使用背景顏色完成的，導致潛在的衝突。
現在不需要了！我們的列著色現在都是使用嵌入式 box-shadow 完成的 (現代化我們 CSS 的另一個好處)。使用著色的 Alpha 通道，您現在可以簡單地將背景顏色應用於儲存格和列，它們將與所有 DataTables 功能一起運作，包括列選擇。
其他變更
還有許多較小的變更
- 透過 Ajax 載入語言檔時，定義的本機語言選項現在將覆寫遠端載入的選項。
- 現在有一個
columnDefs.target選項 - 這只是columnDefs.targets的別名，但對於以單一欄為目標時很有用。 - 預設的處理指示器已更新，更具吸引力。
nowrap類別和其他文字對齊類別現在在所有支援的樣式整合中都可用。pluck支援巢狀資料。
接下來是什麼？
正如我在開始時提到的，這是 DataTables 的漸進式更新，還有更多內容即將推出。我們正在努力開發 DataTables 2，其中包括對版面配置方式進行重大變更 (可怕的 dom 選項！)，以及更好的標題和頁尾處理。事實上，DataTables 2 已經在 CloudTables 中投入生產，但尚未準備好發布，而且某些功能需要完善。我不想等到完成並在此版本中包含此處描述的功能，而是希望儘快發布並提供這些功能。DataTables 2 尚未定義發布日期 - 它會在完成時完成！
很有可能這將是 1.x 系列中的最後一個 (儘管我在發布 1.10 和 1.11 時也這麼說)！
發行說明
以下是我們今天發布的所有更新版本的發行說明連結