2014 年 10 月 9 日星期四

DataTables 1.10.3

DataTables 函式庫套件中任何元件的次要版本更新通常不會在部落格文章中發布，只會在發佈訂閱源中宣布發佈資訊。然而，DataTables 1.10.3 加入了一些非常值得正式介紹的新功能。其中包括：

將 DOM 來源的資料讀取到 JavaScript 物件中
選取器可以作為函式提供
cells().render() 和 cell().render() API 方法
iterator() API 方法
searchDelay 選項

DataTables 1.10.3 還包括 11 個錯誤修復，以及本網站上提供的文件和範例的一些更新。

最新的 1.10.3 版本現在可從下載頁面取得，如果需要遠端託管檔案，也可以在DataTables CDN上取得。完整發佈說明也可用。

DOM 來源的物件

從 HTML 表格讀取資料時，DataTables 過去總是將資訊讀取到陣列中，每個欄位對應一個陣列條目。然而，使用基於物件的資料（我們許多人透過 JSON 熟悉）可能具有許多優點，例如容易記住的參數名稱（而不是需要記住欄位索引）。

將資訊讀取到陣列仍然是 DataTables 中的預設操作，但 1.10.3 引入了將資訊讀取到物件中的功能，如果您正在使用 API 來操作資料，這會非常有用。這是透過熟悉的columns.data選項來完成的。只需將其設定為您希望用於從該欄位讀取資料的屬性名稱，DataTables 就會為您建構物件。如果您希望建立更複雜的資料結構，這也受益於columns.data使用複雜和巢狀物件的能力，透過點式物件語法即可實現。

此新功能的執行範例可用，顯示了左側的初始化如何建構右側顯示的物件資料

$('#example').DataTable( {
    "columns": [
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "age" },
        { "data": "start_date" },
        { "data": "salary" }
    ]
} );

[
    {
        "name":       "Airi Satou",
        "position":   "Accountant",
        "office":     "Tokyo",
        "age":        "33",
        "start_date": "2008/11/28",
        "salary":     "$162,700"
    },
    ...
]

API

在 1.10 版中引入的新的API廣受好評，並且是 DataTables 作為一個吸引開發人員的函式庫的核心要素。v1.10.3 為 API 引入了許多新功能，擴展了其彈性和實用性。

選取器函式

DataTables API 如此強大的部分原因是rows()、columns() 和 cells()的選取器選項，這些選項可以根據表格的結構以自然的方式從表格中選取元素，並建立在 jQuery 中選取器選項的彈性基礎之上。

v1.10.3 引入了將這些方法（及其單數對應方法）的選取器作為函式提供的功能，讓使用 DataTables 的開發人員可以完全控制進入匹配集的元素。當搜尋資料或使用其他複雜的選取演算法時，這會特別有用。

當作為函式使用時，三種選取器類型（row-selector、column-selector 和 cell-selector）共用一個通用的引數簽章（請參閱每種型別的文件以了解完整詳細資料）

索引
資料
節點

如果項目要包含在結果集中，函式應傳回 true，否則傳回 false。

例如，下面的程式碼使用rows()和row-selector函式來選取表格中每行的資料屬性 overdue 設定為 true 的所有列。然後，將類別新增到這些列以突顯它們

var table = $('#timetable').DataTable();
var rows = table
    .rows( function ( idx, data, node ) {
        return data.overdue ? true : false;
    } )
    .nodes();

$(rows).addClass('highlight');

迭代器

當使用rows()、columns() 和 cells() 方法時，通常會想要在選取器找到的項目上迴圈，並對這些項目執行某些操作，或從這些項目讀取資訊。這通常是透過each()方法或 for 迴圈來完成，這兩者都可以正常運作。但是，DataTables 在 API 中有一個內部使用的名為 iterator() 的方法，該方法會為您處理所選索引的迴圈邏輯。v1.10.3 公開了此方法以供外部使用。

存在許多不同的迴圈選項，如果您想使用此方法，我建議您閱讀iterator()文件，它可能是 DataTables API 中最複雜的方法，主要設計供外掛和擴充功能作者使用。

渲染器

DataTables 使用正交資料和columns.render的格式化選項的功能非常強大，但您可能常常希望能夠存取渲染後的資料（例如，當基於表格中的資料建構 select 輸入以提供篩選選項時）。

row().data() 和其他 data() 方法都提供對底層資料的存取，但 v1.10.3 引入了 cells().render() 和 cell().render() 方法，以便能夠觸發特定資料型別的渲染。

搜尋延遲

最後，一個相對次要但仍然受歡迎的功能是控制內建搜尋輸入的節流速率的功能。DataTables 1.10 在使用伺服器端處理時，對預設搜尋輸入引入了 400 毫秒的節流，無論使用者在輸入中輸入的速度有多快，都會將 Ajax 請求傳送到伺服器以篩選表格的最大次數減少到每 400 毫秒一次。

現在可以使用searchDelay選項來控制伺服器端和用戶端處理的節流速率。伺服器端處理的預設值仍然是 400 毫秒，用戶端處理的預設值仍然是 0，但使用這個新選項，您可以根據需要自訂它。

即將推出...

DataTables 1.10.3 的開發過程非常愉快，我希望大家都能從它帶來的增強功能中受益。雖然這裡有很多新功能，但每個單獨的新功能都相對較小，但它們都補充了函式庫的整體客製化和彈性。這裡的功能幾乎值得推出一個主要的新版本，但與其將這些增強功能保留給計劃用於 1.11 的其他變更，我更希望盡快發佈它們。

v1.11 的工作仍在繼續，計劃大幅修改 DataTables 中的搜尋方式。預計 v1.11 將在 2015 年上半年推出。

同時，Editor v1.4 的工作仍在繼續，它將引入 C# 函式庫和 .NET 範例，並計劃在之後很快發布 v1.5。AutoFill、KeyTable 和 TableTools 也將在短期內進行重大更新。

祝您使用愉快！