類型
表格操作可能會因表格中存在的資料而有所不同,因此不僅提供對最常見資料類型的處理,而且提供當不同應用程式中出現不同資料類型需求時,可以註冊新資料類型的方法非常重要。本文檔描述了 DataTables 中內建的資料類型,以及如何註冊其他資料類型。
什麼是資料類型?
DataTables 中的每個欄位都會被指派一個特定的「資料類型」。以下操作會因資料類型而異
- 排序(例如,數字、日期和字串都使用不同的排序方法)。
- 搜尋(例如,將顯示值(例如電話號碼)去格式化為搜尋詞)。
- 欄位的預設類別名稱(例如,數字預設為靠右對齊,而文字預設為靠左對齊)。
- 渲染.
資料類型名稱對於每個類型都是唯一的,但是一個類型可以被用於多個欄位(如果表格沒有匹配的資料,則可以不使用)。若要查看已指派給欄位的資料類型,請使用 column().type()
方法。
當資料被新增到表格時,DataTables 會為每個資料類型執行類型偵測方法,以確定欄位中的資料是否可以被指派一個資料類型。如果欄位中所有儲存格的資料都匹配,則會將該資料類型指派給該欄位。如果沒有找到匹配的類型,DataTables 將始終回退到 string
類型。
內建類型
您可以使用 DataTable.types()
方法來確定頁面上表格可用的類型。預設情況下,這些類型為
num
- 純數字(例如,1、8432)。num-fmt
- 格式化的數字(例如,$1'000、8,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.0string
- 純文字字串。
DataTables 也可以透過內建的 DataTable.datetime()
靜態方法註冊其他資料類型。這允許使用 Moment.js 或 Luxon 正確排序許多不同格式的日期/時間字串。
註冊新類型
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
了解可以為資料類型設定的完整選項集。