responsive.details.renderer
定义用于显示子行的渲染器。
请注意 - 此属性需要 Responsive 扩展，用于 DataTables。
说明
由 Responsive 显示的详细信息行中包含的信息是通过此功能创建的。默认情况下，它会创建一个 ul / li 列表，显示隐藏的单元格中的数据，或者您可以使用其他内置渲染器之一，或提供您自己的渲染器。
呈现功能针对表中的详细显示执行，并且只要表的列可见性发生更改，就会运行此功能。
请注意，与 Responsive 的所有其他配置选项一样，此选项是 默认 DataTables 选项集 的扩展。此属性应在 DataTables 初始化对象中设置。
自 v2.1.0 起，Responsive 具有许多内置呈现功能，可以从 DataTable.Responsive.renderer 对象访问。内置渲染器作为必须执行的功能提供，并且将返回所需的渲染器。这提供了向渲染器传递选项的能力。
内置选项为
listHidden- 在ul/li列表中显示已隐藏的数据。- 没有其他选项
- 默认渲染器
listHiddenNodes- 与listHidden相同，但将 DOM 节点从表单元格移动到列表中。如果需要，这可用于保留单元格内容上的事件处理程序。- 没有其他选项
tableAll- 在table中显示所有列的数据（无论是否已隐藏）。- 单一选项：
tableClass- 应用于创建的表的类名称。
- 单一选项：
如果您希望使额外的渲染器模块化，还可以创建它们并附加到此对象。如果是这样，请 随时与社区 分享它们！
在为要显示的每个项目创建 HTML 时，最好根据给定的 rowIndex 和 columnIndex 信息添加 data-dt-row 和 data-dt-column 属性。这允许将这些元素及其子元素传递给 DataTables API 选择器方法（例如 cell()），并用作 API 的常规部分。
类型
function renderer( api, rowIdx, columns )
- 参数
名称 类型 可选 1 api否 有关表的 DataTables API 实例
2 rowIdx否 请求渲染器进行渲染的行行索引。使用
row()和/或cells()方法从 API 获取有关此行的信息，以便可以呈现此信息。3 columns否 自 2.0.0 起：包含有关 DataTable 中每列信息的各个对象的数组。数组长度与 DataTable 中的列数完全相等，其中每一列按索引顺序由 DataTable 表示。此外，数组中每个对象的结构如下
{ className: ..., // string - host column's class name (since Responsive 2.2.4) columnIndex: ..., // integer - column data index (since Responsive 2.0.1) data: "...", // string - cell's value hidden: true / false, // boolean - true if hidden by Responsive - otherwise false rowIndex: ..., // integer - column data index (since Responsive 2.0.2) title: "...", // string - column title }- 返回
有两种返回值
默认值
- 值:
函数
将在 ul/li 列表中显示隐藏信息的函数。
示例
使用 tableAll 渲染器，不指定类名称
new DataTable('#myTable', {
responsive: {
details: {
renderer: DataTable.Responsive.renderer.tableAll()
}
}
});使用 tableAll 渲染器，并指定一个类名称
new DataTable('#myTable', {
responsive: {
details: {
renderer: DataTable.Responsive.renderer.tableAll({
tableClass: 'ui table'
})
}
}
});自定义渲染器，在 HTML 表格中显示已隐藏的数据
new DataTable('#myTable', {
responsive: {
details: {
renderer: function (api, rowIdx, columns) {
var data = $.map(columns, function (col, i) {
return col.hidden
? '<tr data-dt-row="' +
col.rowIndex +
'" data-dt-column="' +
col.columnIndex +
'">' +
'<td>' +
col.title +
':' +
'</td> ' +
'<td>' +
col.data +
'</td>' +
'</tr>'
: '';
}).join('');
return data ? $('<table/>').append(data) : false;
}
}
}
});