DataTables 2 的新功能

DataTables 2 是 DataTables 的主要更新，為函式庫帶來了廣泛的增強功能。本文檔包含大多數重要新功能的詳細資訊。

它是詳細說明 DataTables 2 發布的多個相關文件的一部分

版面配置和功能

這可能是大多數使用 DataTable 的人會遇到的問題。將控制元素定位在表格周圍對於根據您的特定需求客製化 UI 非常重要。先前在 DataTables 中使用了 dom 選項，雖然可以使用，但維護起來很麻煩，尤其是在使用 Bootstrap 等樣式整合時。

因此，DataTables 2 引入了一個新的 layout 選項，使表格元素的定位更加容易。它提供了一個位置網格，您可以將元素插入其中，使用由 top 或 bottom 組成的簡單物件鍵，可選擇後接 Start 或 End。兩者之間可以放置一個數字，以允許多行操作。請參閱 layout 以取得其視覺表示。

這樣做的結果是，我們現在可以使用簡單的物件鍵插入元素，例如：

new DataTable('#myTable', {
    layout: {
        topStart: 'buttons'
    }
});

此外，這也引導出了 DataTables 中的「功能」。每個控制元素都是一個在 DataTables 中註冊的「功能」，可以在 layout 物件中單獨設定，而不是依賴頂層設定物件。DataTables 具有四個內建功能：info、pageLength、paging 和 search。擴充功能可以添加諸如 buttons 和 searchBuilder 之類的功能。

考慮一下您可能需要在表格周圍添加多個按鈕群組的情況。現在使用 DataTables 2 非常簡單

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [ 'create', 'edit', 'remove' ]
        },
        topEnd: {
            buttons: [ 'excel', 'csv' ]
        }
    }
});

透過 DataTable.feature.register() 方法，很容易建立新的功能以與 layout 一起使用。當我為 DataTables 建立其他外掛程式時，您會在未來的部落格文章中看到更多相關資訊！

搜尋

搜尋是使資料可存取的基礎，畢竟這就是 DataTables 的宗旨。在為 DataTables 建立搜尋元件時，您通常會想要結合多個自訂篩選器，同時仍然為最終使用者提供輸入他們自己的搜尋詞的功能。現在在 DataTables 中使用新的固定搜尋方法變得容易得多

使用這些方法，您會建立一個「具名搜尋」，該搜尋將與任何其他搜尋詞一起套用，直到被取代或移除。

不僅如此，DataTables API 的搜尋功能也透過能夠傳遞搜尋函式、正規表示式或「智慧」搜尋字串而大大增強。DataTables 的智慧搜尋已增強，除了透過新的 DataTables.SearchOptions 物件提供的更多選項外，還支援負向搜尋，該物件提供諸如 exact、boundary 等選項。

此外，內建搜尋現在是變音符號中立的。也就是說，您的資料可以包含帶重音符號的字元，而您的最終使用者可以輸入不帶重音符號的字元，並且它會比對。

有關 DataTables 中搜尋的詳細資訊，請參閱新的搜尋手冊頁面。

項目語言

每個 DataTable 都會顯示特定類型的資料。預設語言字串將資料項目稱為「entries」，但是如果您調整語言字串以符合所顯示的內容，則可以幫助您的最終使用者了解頁面上的資料，例如，對於分頁資訊，如果您顯示的是人員清單，則您可能想要使用顯示 x 到 y，共 z 個人。在 DataTables 1 中，這是可以做到的，但是您必須調整每個引用通用「entries」術語的語言字串。

DataTables 2 引入了一個新的 language.entries 選項，預設語言字串會使用此選項來輕鬆自訂資料的命名方式。例如，以下程式碼將自訂 info 和 pageLength 字串（另請注意，它也支援 i18n() 的複數形式，以進一步使您的表格對您的最終使用者來說感覺更自然和正確）

new DataTable('#myTable', {
    language: {
        entries: {
            _: 'people',
            1: 'person'
        }
    }
});

標題

caption 標籤用於提供表格的標題，現在是 DataTables 中的一等公民，能夠使用 caption 在啟動時設定標題，並使用 caption() 和 caption.node() 在執行期間更新。

資料類型

表格中資料的操作在很大程度上取決於要顯示的資料的格式和結構，例如，日期與數字的處理方式不同，而數字與字串等的處理方式也不同。DataTables 一直具有向其中新增額外資料類型的功能，但這樣做的 API 已被分散。DataTables 2 透過新的 DataTable.type() 和 DataTable.types() 方法，實現了資料類型控制的協調。

此外，DataTables 中的資料類型處理系統現在還具有為偵測到的資料類型自動定義類別和渲染器的能力。這用於日期和數字的內建資料類型，以提供更自然的資料對齊方式。

在手冊中有一個新的章節，其中更深入地介紹了如何控制內建資料類型，以及如何註冊您自己的自訂資料類型。例如，以下程式碼將偵測具有 IPv4 格式資料的欄位、應用正確的排序，並將類別新增至欄位

DataTable.type('ipv4', {
    detect: function (data) {
        return typeof data === 'string' &&
            data.match(/^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/)
                ? 'ipv4'
                : null;
    },
    order: {
        pre: function (data) {
            return Number(
                data
                    .split('.')
                    .map((num, idx) => num * Math.pow(2, (3 - idx) * 8))
                    .reduce((a, v) => ((a += v), a), 0)
            );
        }
    },
    className: 'dt-data-ipv4'
});

準備就緒動作

論壇中經常出現的常見支援問題是，為什麼在使用 ajax 時與 API 的互動無法運作。答案很簡單，Ajax 載入的資料是異步的，因此您的程式碼需要等待從伺服器載入資料後才能使用。可以使用 initComplete 來解決此問題，當您知道答案時，這很簡單，但是如果您不熟悉異步程式設計，這可能會讓人感到沮喪。

為了幫助解決此問題，並允許在異步和同步載入的表格之間重複使用程式碼，DataTables 2 引入了新的 ready() 方法。此函式採用單個引數，並且會在表格準備好資料時執行給定的函式（如果資料已準備好，則可能會立即執行）。

考慮

let table = new DataTable('#myTable');
 
table.ready(function () {
    // Actions to take when the table is ready
    // ...
});

和

let table = new DataTable('#myTable', {
    ajax: '/api/data'
});
 
table.ready(function () {
    // Actions to take when the table is ready
    // ...
});

程式結構是相同的，但是只有在表格完全載入資料後，才會執行 ready 回呼函式。

伺服器端處理 JSON 屬性

DataTables 長期以來一直能夠透過 ajax.dataSrc 選項指定在 JSON 物件中尋找要顯示在表格中的資料陣列的屬性名稱。但是，這並未擴展到伺服器端處理，如果您傳回的參數名稱與 DataTables 所期望的不符，您通常必須編寫自己的 Ajax 呼叫。

使用 v2，ajax.dataSrc 已擴展，因此可以將其作為一個物件提供，該物件能夠為每個預期的參數個別提供對應。例如，可以使用以下對應

new DataTable('#myTable', {
    ajax: {
        url: '/api/users',
        dataSrc: {
            data: 'results',
            draw: 'request',
            recordsTotal: 'total',
            recordsFiltered: 'filtered'
        }
    },
    serverSide: true
});

欄位方法

DataTables 2 使用許多新方法擴展了欄位 API

column().render() / columns().render() - 渲染欄位的資料並傳回。補充現有的 cell().render() / cells().render() 方法。
column().orderable() /-api columns().orderable()` - 判斷欄位是否可排序。
column().header(row) /-api columns().header(row)` - 從現有方法擴展，以新增在標題中取得特定列的功能。
column().footer(row) /-api columns().footer(row)` - 如上所述，但適用於表格頁尾。
column().title() /-api columns().titles()` - 取得/設定欄位的標題。
column().type() /-api columns().types()` - 取得為欄位偵測到的資料類型。
column().width() /-api columns().width()` - 取得所選欄位的寬度。

實用工具方法

DataTables 已透過 API 提供許多內部方法，例如 DataTable.util.get() 和 DataTable.util.set()。這些方法現在已在 DataTables 2 中擴展，並新增了以下方法

DataTable.util.stripHtml() - 移除 HTML。也提供您自己的解析器，如果您需要比內建的正規表示式更精確的解析。
DataTable.util.escapeHtml() - 轉義字串中的 HTML 字元，使其可以安全地注入到文件中。
DataTable.util.unique() - 從提供的陣列中取得唯一的項目。
DataTable.util.diacritics() - 從字串中移除變音符號。如果內建方法不足以滿足您的需求，也可以修改從字串中移除變音符號的方式。

這些方法不是 DataTables 的核心功能，它不是像 Lodash 這樣的實用程式庫，但 DataTables 內部使用了這些方法，它們通常對外掛程式和擴充功能很有用，以幫助鼓勵程式碼重用。

以及更多

以上只是重點。 DataTables 2 中還有許多新功能，例如改進了對複雜標頭/頁尾的支援、使用元組進行排序規範、額外的 CSS 變數等等。版本說明提供了所有新增和變更的詳細資訊。