類型

表格操作可能會因表格中存在的資料而有所不同,因此不僅提供對最常見資料類型的處理,而且提供當不同應用程式中出現不同資料類型需求時,可以註冊新資料類型的方法非常重要。本文檔描述了 DataTables 中內建的資料類型,以及如何註冊其他資料類型。

什麼是資料類型?

DataTables 中的每個欄位都會被指派一個特定的「資料類型」。以下操作會因資料類型而異

  • 排序(例如,數字、日期和字串都使用不同的排序方法)。
  • 搜尋(例如,將顯示值(例如電話號碼)去格式化為搜尋詞)。
  • 欄位的預設類別名稱(例如,數字預設為靠右對齊,而文字預設為靠左對齊)。
  • 渲染.

資料類型名稱對於每個類型都是唯一的,但是一個類型可以被用於多個欄位(如果表格沒有匹配的資料,則可以不使用)。若要查看已指派給欄位的資料類型,請使用 column().type() 方法。

當資料被新增到表格時,DataTables 會為每個資料類型執行類型偵測方法,以確定欄位中的資料是否可以被指派一個資料類型。如果欄位中所有儲存格的資料都匹配,則會將該資料類型指派給該欄位。如果沒有找到匹配的類型,DataTables 將始終回退到 string 類型。

內建類型

您可以使用 DataTable.types() 方法來確定頁面上表格可用的類型。預設情況下,這些類型為

  • num - 純數字(例如,18432)。
  • num-fmt - 格式化的數字(例如,$1'0008,000,000)。
  • html-num - 帶有 HTML 的純數字(例如,10)。
  • html-num-fmt - 帶有 HTML 的格式化數字(例如,_<em>€9.200,00</em>
  • date - ISO8601 格式的日期(例如,2151-04-01)。
  • html - HTML 字串(例如,<i>Tick</i>)。
  • string-utf8 - 具有 UTF-8 字元的純文字字串(例如,Crème Brulée)。2.1.0
  • string - 純文字字串。

DataTables 也可以透過內建的 DataTable.datetime() 靜態方法註冊其他資料類型。這允許使用 Moment.jsLuxon 正確排序許多不同格式的日期/時間字串。

註冊新類型

DataTables 提供了靜態 DataTable.type() 方法,以允許註冊新的資料類型,以及修改現有的資料類型屬性。此方法將資料類型名稱作為第一個參數,然後將 DataTables.Type 物件來定義資料類型。這必須包含類型偵測函數,並且還可以包含用於排序資料、格式化搜尋詞和自動類別指派的函數。

舉例來說,以下定義了對自動偵測的 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'
});

有關可以定義用於註冊新資料類型的選項的完整詳細資訊,請參閱 DataTables.Type 的文件。

修改資料類型選項

內建的資料類型都是使用上述方法註冊的,它不僅允許註冊類型,還允許修改。這讓您可以根據需要自訂內建的資料類型(例如,額外的類別名稱)。這是透過傳入已定義的資料類型的部分物件來完成的。

舉例來說,以下程式碼將設定類別名稱 numeric,用於任何被發現包含數字資料的儲存格

DataTable.type('num', {
    className: 'numeric'
});

與之前一樣,請參閱 DataTables.Type 了解可以為資料類型設定的完整選項集。