类型

表操作可能因表中存在的数据而有所不同,重要的是不仅要提供对最常见数据类型的处理,还要提供可注册新的数据类型的方法,因为在不同的应用程序中需要不同的数据类型。本文档介绍了内置于 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 - 纯文本字符串。

还可通过内置的 DataTable.datetime() 静态方法注册其他数据类型到 DataTables 中。这可通过使用 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,了解可为数据类型设置的完整选项集。