类型
表操作可能因表中存在的数据而有所不同,重要的是不仅要提供对最常见数据类型的处理,还要提供可注册新的数据类型的方法,因为在不同的应用程序中需要不同的数据类型。本文档介绍了内置于 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
- 纯文本字符串。
还可通过内置的 DataTable.datetime()
静态方法注册其他数据类型到 DataTables 中。这可通过使用 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
,了解可为数据类型设置的完整选项集。