列渲染

自：DataTables 1.10 起

渲染（处理）数据以供表格使用。

说明

此属性将修改 DataTables 在从数据源读取时用于各种操作的数据。与 columns.data 一样，此选项可以通过多种不同方式提供，以影响其行为，如下所述。

columns.render 选项返回的数据（无论将其用作函数、整数还是字符串）都是 DataTables 将用于所请求的数据类型（称为已解析数据）。DataTables 针对不同的操作请求不同数据的这种能力称为正交数据，它允许同一数据的不同形式用于不同的操作（例如，日期可以针对最终用户进行格式化以供显示和搜索，但以整数形式用于排序）。

有四个特殊值 columns.render 可以解析为

undefined - 将使用 columns.defaultContent 值。如果未指定默认内容，将会出现一条错误。
null - 将使用 columns.defaultContent 值。如果没有指定默认内容，则针对显示数据将使用空字符串。针对所有其他数据类型都将使用 null。
function - 将执行函数并使用返回的值。自 DataTables 1.10.1 起，该函数将在与行的 data 对象相同的范围内执行。结果是可将对象实例用作一行的 data 源。请参阅以下示例以了解如何将实例与 DataTables 一起使用。
node 2.0 - 在请求 display 数据类型时，您可能会返回一个 DOM 节点，以在表格的单元格中显示。务必要注意，所有其他数据类型都应返回字符串或数字值，这样 DataTables 才能对其进行操作（例如，搜索、排序和类型检测需要除 DOM 节点以外的其他数据！）。

数组访问

当用作字符串（见下文）时，此选项可用于从数组中获取多个数据点，或专门访问数组中的一个元素。如果您希望访问行数据对象内的基于数组的数据，那么了解这两种形式之间的区别非常重要。

使用数组中的一个或多个属性 - 使用 [] 符号
仅获取数组中的单个元素 - 使用点符号 - 例如：.0 来访问数组中的第一个元素。

例如，考虑一下这个数据结构

"access": [
  { "id": "1", "name": "Printer" },
  { "id": "3", "name": "Desktop" },
  { "id": "4", "name": "VMs" }
]

要在单个单元格中显示数组中对象的 name 属性，请使用 access[, ].name - 这将用 , 连接名称，例如：在此示例中，结果将为 Printer, Desktop, VMs。

要访问数组中的单个属性，请使用 .{index}。再次使用上面的 JSON，若要仅显示访问数组中的第一个名称，请使用 access.0.name - 例如：在此示例中，结果将为 Printer。

类型

整数

说明: 用作数据源的数组索引。这是 DataTables 使用的默认值（针对每一列递增）。

字符串

说明

从数据源读取对象属性。字符串中可以使用三个“特殊”选项来改变 DataTables 从源对象读取数据的方式

. - 点分 Javascript 符号。如同你在 Javascript 中使用 . 从嵌套对象读取的方式，你也可以使用 data 中指定的选项。例如：browser.version 或 browser.name。如果你的对象参数名称包含一个句点，请使用 \\ 转义它，即 first\\.name。
[] - 数组符号。DataTables 可以自动组合来自数组源的数据，使用在两个方括号之间提供的字符连接数据。例如：name[, ] 将从源数组提供用逗号空格分隔的列表。如果在方括号之间没有提供任何字符，则返回原始数组源。有关数组访问的更多信息，请参见上文。
() - 函数符号。在参数末尾添加 () 将执行给定名称的函数。例如：对于数据源上的简单函数，为 browser()，对于嵌套属性中的函数，为 browser.version()，或对于获取对象属性（如果调用函数返回对象），甚至为 browser().version。请注意，建议在 columns.render 中而不是 columns.data 中使用函数符号，因为这样做作为渲染器使用要简单得多。

对象

说明

对 DataTables 请求的不同数据类型（filter、display、type 或 sort）使用不同的数据。对象中属性的名称是被引用属性的数据类型，值可以使用整数、字符串或函数进行定义，使用与 columns.render 通常用于定义相同的方式。

请注意，可以选择指定一个 _ 选项。如果你没有为 DataTables 请求的数据类型指定一个值，则这是一个默认值。如果在没有指定 _ 选项的情况下，没有为请求的数据类型提供任何选项，则将使用 columns.data 选项所指向的数据。

例如，你可能使用

"data": "phone",
"render": {
    "_": "plain",
    "filter": "filter",
    "display": "display"
}

数组

说明

DataTables 有很多内置的帮助器渲染函数可用于执行基本的格式设置。这些帮助器可以从 $.fn.dataTable.render 访问，并将解析为一个函数（见下文），该函数将用于数据呈现。如果您在纯 JavaScript 中定义列，则这种方法非常有效，但如果您希望使用 JSON 来定义它们，由于 JSON 中无法定义函数，我们需要一种不同的方法——数组值提供了这种能力。

数组的第一个元素应为包含呈现函数名称的字符串。然后，数组的其余元素会传递给指定的呈现函数。

例如，您可能使用格式设置来访问 number 格式化函数

'data': 'cost',
'render': ['number', ',', '.', 0, '$']

这与下面相同

data: 'cost',
render: DataTable.render.number( ',', '.', 0, '$' )

function render( data, type, row, meta )

说明

如果给出一个函数，只要 DataTables 需要获取列中单元格的数据时，该函数就会执行。请注意，此函数可能会被调用多次，因为 DataTables 会针对它需要的不同数据类型（排序、筛选和显示）调用它。

参数

	名称	类型	可选
1	`data`	`任意`	否
	单元格的数据（基于 `columns.data`）
2	`type`	`字符串`	否
	请求的类型调用数据。这用于 DataTables 的正交数据支持。此值将为以下之一 `filter`：获取 DataTables 应在此单元格上用于筛选的值。 `display`：表中显示的值。 `type`：用于类型检测的值。这通常应与 `sort` 值匹配 - 请参阅类型检测插件文档。 `sort`：获取用于在此单元格上进行排序的数据 - 返回的值通常应该是数字或字符串，但可以使用自定义插件 - 请参阅插件文档。请注意，出于历史原因，此值为 `sort`（而不是更符合 API 其他部分的 `order`）。 `undefined`：获取单元格的原始数据（即未修改的数据）。自定义值：例如 Responsive 插件（通过其 `responsive.orthogonal` 选项）和 Buttons 插件（`buttons.exportData()`）可以请求由开发人员指定的自定义数据类型。当您希望向特定扩展发送某些数据时，这会很有用。另请参阅 `cell().render()` 方法，该方法可用于在任意时间执行给定的渲染方法。
3	`row`	`任意`	否
	行的完整数据源（不基于 `columns.data`）
4	`meta`	`对象`	否
	自 1.10.1 起：一个包含有关所请求单元格的附加信息的对象。该对象包含以下属性 `row` - 请求单元格的行索引。请参阅 `row().index()`。 `col` - 请求单元格的列索引。请参阅 `column().index()`。 `settings` - 适用于该表格的 `DataTables.Settings` 对象。如有需要，可以使用该对象获取 API 实例。

返回

函数的返回值将用于请求的数据。

示例

从对象数组创建以逗号分隔的列表

new DataTable('#myTable', {
	ajaxSource: 'sources/deep.txt',
	columns: [
		{ data: 'engine' },
		{ data: 'browser' },
		{
			data: 'platform',
			render: '[, ].name'
		}
	]
});

作为一个对象，根据不同的类型提取不同的数据

// This would be used with a data source such as:
//   { "phone": 5552368, "phone_filter": "5552368 555-2368", "phone_display": "555-2368", ... }
// Here the `phone` integer is used for sorting and type detection, while `phone_filter`
// (which has both forms) is used for filtering for if a user inputs either format, while
// the formatted phone number is the one that is shown in the table.
new DataTable('#myTable', {
	columnDefs: [
		{
			targets: 0,
			data: null, // Use the full data source object for the renderer's source
			render: {
				_: 'phone',
				filter: 'phone_filter',
				display: 'phone_display'
			}
		}
	]
});

如上所述，其中 phone 信息作为对象

// This would be used with a data source such as:
//   "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" }
new DataTable('#myTable', {
	columnDefs: [
		{
			targets: 0,
			data: 'phone',
			render: {
				_: 'plain',
				filter: 'filter',
				display: 'display'
			}
		}
	]
});

用作函数，用于根据数据源创建链接

new DataTable('#myTable', {
	columnDefs: [
		{
			targets: 0,
			data: 'download_link',
			render: function (data, type, row, meta) {
				return '<a href="' + data + '">Download</a>';
			}
		}
	]
});

为长字符串显示省略号

new DataTable('#myTable', {
	columnDefs: [
		{
			targets: 4,
			data: 'description',
			render: function (data, type, row, meta) {
				return type === 'display' && data.length > 40
					? '<span title="' + data + '">' + data.substr(0, 38) + '...</span>'
					: data;
			}
		}
	]
});

使用对象实例作为该行的 data 源

function Person(name, age, position) {
	this._name = name;
	this._age = age;
	this._position = position;

	this.name = function () {
		return this._name;
	};

	this.age = function () {
		return this._age;
	};

	this.position = function () {
		return this._position;
	};
}

$(document).ready(function () {
	var table = $('#example').DataTable({
		columns: [
			{ data: null, render: 'name' },
			{ data: null, render: 'age' },
			{ data: null, render: 'position' }
		]
	});

	table.row.add(new Person('Airi Satou', 33, 'Accountant'));
	table.row.add(
		new Person('Angelica Ramos', 47, 'Chief Executive Officer (CEO)')
	);
	table.row.add(new Person('Ashton Cox', 66, 'Junior Technical Author'));
	table.draw();
});

列渲染

说明

数组访问

类型

整数

字符串

对象

数组

function render( data, type, row, meta )

示例

相关内容

数据表