渲染器

有的时候，表行的来源数据中不包含您想在表中展示的值。您可能希望将它转换成不同的形式（例如，将时间戳转换成人类可读的格式），组合数据点（可能是名字和姓氏），或针对该值执行一些计算（可能是从营业额和费用值中计算出利润）。

DataTables 术语中，将原始数据转换为将在 DataTable 中显示的值的过程称为 *渲染*，并使用 columns.render 选项执行。

数据渲染

在 DataTables 中使用数据渲染器的主要优点是，您无需修改原始数据即可修改输出数据。可以使用 columns.data 方法获取和设置数据，但设置操作增加了相当大的复杂性，因此建议使用 columns.data 选项，直接指向原始数据，并允许（只读）渲染器 (columns.render) 转换数据。

可以在很多不同的用途下使用 columns.render

作为转换数据的函数
作为字符串，从对象中选择数据

函数

使用 columns.render 是最常见的方法，因为它可以完全控制显示给最终用户的数据（这是普通 Javascript 函数，因此您几乎可以使用该数据做任何事情）。

该函数被传递了三个参数

columns.data 指向的数据。如果 columns.data 为 null，此处给定的值为 null。
DataTables 请求的数据类型 - 这让函数能够支持正交数据。
行的原始且完整的数据对象或数组。

从函数返回的值就是 DataTables 将要用于所请求数据（显示、排序、搜索等）的值。

例如，考虑以下包含一行数据的结构

{
    "product": "Toy car",
    "creator": {
        "firstName": "Fiona",
        "lastName": "White"
    },
    "created": "2015-11-01",
    "price": 19.99,
    "cost": 12.53
}

添加格式化

在我们数据表中，如果我们希望有显示价格的列，使用货币符号作为它的前缀是很常见的。这里我们使用一个美元符号（也可以看看内置的数字呈现器，在下面它提供了高级的格式化选项）

{
    data: 'price',
    render: function ( data, type, row ) {
        return '$'+ data;
    }
}

连接字符串

在我们数据表中，如果我们希望有一个单列显示创建者的全名，我们可以使用以下 columns 定义连接字符串（特别注意如何使用 columns.data 选项，传入 create 对象作为第一个参数）

{
    data: 'creator',
    render: function ( data, type, row ) {
        return data.firstName +' '+ data.lastName;
    }
}

转换数据

对于另一列，我们希望显示 created 的值，但使用美国标准 MM-DD-YYYY 格式进行格式化。这可以通过分割字符串并重新排列组成部分来完成。我们还希望日期的可排序，并且因为 DataTables 已经为 ISO8601 格式字符串（原始格式）内置了支持，我们希望仅为 display 和 filter 数据类型执行转换 — 点击正交数据查看更多内容）

{
    data: 'created',
    render: function ( data, type, row ) {
        var dateSplit = data.split('-');
        return type === "display" || type === "filter" ?
            dateSplit[1] +'-'+ dateSplit[2] +'-'+ dateSplit[0] :
            data;
    }
}

计算值

最后，要从 price 和 cost 字段创建一个利润列，我们可以使用一个函数来计算所需的值 — 注意，对于这个案例，columns.data 是 null — 因此，传递到 columns.render 方法中的第一个参数也是 null，但是第三个参数提供了对原始数据源对象的访问权限，所以我们可以继续使用那里的数据

{
    data: null,
    render: function ( data, type, row ) {
        return Math.round( ( row.price - row.cost ) / row.price * 100 )+'%';
    }
}

字符串

格式化程序的一种不常用的选项是使用字符串只是简单地指向表中需要使用的数据。这与 columns.data 的常用方式类似，但是请记住，渲染器只能够访问 columns.data 所指向的数据，而无法访问完整的一行。

继续使用上面的 JSON 数据结构中的示例，考虑一下一个将显示创建者姓名的列

{
    data: 'creator',
    render: 'firstName'
}

这种方法与这里介绍的示例中简单地使用 data: 'creator.firstName' 相比，没有优势，但是如果你有复杂的数据（包括在数据源对象中包含正交数据），这有时会很有用。

内置辅助对象

DataTables 有许多内置的渲染辅助对象，可以用它们来轻松地格式化数据 — 可以使用插件添加更多（参见下面）

date — 格式化日期（从 1.12 起）
datetime — 格式化日期时间（从 1.12 起）
number — 格式化数字
text — 从潜在的不安全源安全地显示文本（HTML 实体被转义）
time — 格式化时间（从 1.12 起）

内置渲染帮助器可以通过 DataTable.render 对象（1.11 起）或 $.fn.dataTable.render（指向同一个对象的别名）进行访问。它们是函数（允许传递选项），这些函数应立即执行，并将结果分配给 columns.render 方法。这听起来可能有点复杂，但这仅仅意味着可以像以下代码那样使用某个函数。

{
    data: 'price',
    render: DataTable.render.number( ... )
}

日期和时间帮助器

我们将对 date、datetime 和 time 帮助器函数进行共同探讨，因为它们共享相同的 API。这些渲染器用于：

将 ISO-8601 字符串格式化为区域感知显示字符串，而无需任何其他软件。
通过 Moment.js 或 Luxon 将 ISO-8601 字符串格式化为自定义格式。
在数据中的自定义格式和另一个自定义显示格式之间进行转换（再次使用 Moment.js 或 Luxon）。

date、datetime 和 time 帮助器函数具有以下函数签名

DataTable.render.datetime()                  // Display a locale aware date / time from an ISO-8601 string
DataTable.render.datetime(to)                // Display a custom format date / time from an ISO-8601 string
DataTable.render.datetime(to, locale)        // Display a custom format date / time with a given locale
DataTable.render.datetime(from, to, locale)  // Transform from one custom format to another, with a given locale.

其中

to 是您希望在 DataTable 中显示的格式。请注意，如果使用此选项，则必须在页面中包含 Moment.js 或 Luxon。每个库都有其自己的格式化令牌支持。有关可用的格式化选项，请参阅其文档（Moment.js 文档 | Luxon）。
locale 是传递给 Moment.js 或 Luxon 的区域设置。如果您使用此选项，并且它不是默认的 en，则需要确保加载正在使用的库的该区域设置。
from 应从列中进行解析的日期/时间格式 - 当需要检测非 ISO8601 日期/时间格式时需要此格式。它还使用 Moment.js 和 Luxon 解析令牌，请注意解析是严格的 - 它必须与日期的格式完全匹配。

可在此文档中获取 DataTables 中有关日期/时间处理的示例。

数字帮助器

number 帮助器提供了轻松进行格式化的能力，您猜到了，甚至是数字！在处理数字时，您可能经常希望添加格式化，例如前缀和后缀字符（例如货币指示符）、使用千分位分隔符和指定数字的精度。所有这些都可以通过 number 帮助器实现。

数字帮助器函数具有以下函数签名

DataTable.render.number()                                                // Locale aware number display (since 1.12)
DataTable.render.number(null, null, precision, prefix, postfix)          // Locale aware display with decimal places, prefix and postfix (since 1.12)
DataTable.render.number(thousands, decimal, precision, prefix, postfix) // Thousands and decimal specified

其中

thousands 是用于千分位分隔符的字符（可以是 null，在这种情况下，将使用区域感知分隔符）
decimal 是用于小数字符的字符（可以是 null，在这种情况下，将使用区域感知分隔符）
precision 是浮点数精度 - 0 为整数，1 为一位小数位，依此类推（可选）
prefix 是前缀字符串（可选）
postfix 是后缀字符串（可选）

例如，要以 $19.99 格式显示上面所示数据结构中的 price 数据点，可以使用

{
    data: 'price',
    render: DataTable.render.number( null, null, 2, '$' )
}

请注意，千分位和小数字符都使用 null。这是推荐的做法，因为它允许 DataTables 以适合您的最终用户的方式自动显示数字。

此外，如果number助手遇到一个不是有效数字（要么是包含数字的数字，要么是字符串）的值时，它将先转义其中的任何 HTML 实体（以帮助抵御潜在的安全攻击），然后再返回该值。

可以在此处获取数字呈现器的示例。

文本助手

text助手将确保不会通过转义 HTML 实体来执行原始数据中任何有潜在危险的 HTML。如果要加载的数据可能来自不可靠的数据源，那么这会很有用，而且它可以帮助降低XSS 攻击的风险。

text助手不接受任何参数，所以使用方法十分简单

{
    data: 'product',
    render: DataTable.render.text()
}

自定义助手

呈现助手就是简单地附加到DataTable.render对象（也可以通过$.fn.dataTable.render进行访问）中的函数，以便通过一个位置轻松访问这些函数。这些函数必须返回一个能与columns.render方法一起工作的函数。

比如考虑一下以下简单的插件，它将在给定的字符数后截断文本，如果字符串长于允许的字符数，则显示省略号

DataTable.render.ellipsis = function ( cutoff ) {
    return function ( data, type, row ) {
        if ( type === 'display' ) {
            var str = data.toString(); // cast numbers

            return str.length < cutoff ?
                str :
                str.substr(0, cutoff-1) +'&#8230;';
        }

        // Search, order and type can use the original data
        return data;
    };
};

然后，我们就可以在我们的 DataTables 列定义中使用该插件

{
    data: 'description',
    render: DataTable.render.ellipsis( 10 )
}

更全面的省略号呈现助手可在DataTables 插件存储库中获取，它具有断词和 HTML 转义控制。随着开发，其他内容也会在同一存储库中提供。

贡献

如果您编写了想与 DataTables 社区分享的呈现助手，首先，感谢您！呈现助手可提交到插件存储库，并且非常欢迎您提出请求。或者，如果您没有 GitHub 帐户，则可以在DataTables 论坛中发布您的代码。