子行
此示例演示了如何通过为 requestChild 添加监听器来将子行与 StateRestore 集成。
DataTables API 有许多方法可以将子行附加到 DataTable 中的行。这可以用于显示有关行的其他信息，对于希望传达有关行比主机表中空间更多信息的情况很有用。
这里使用 row().child() api 方法来显示在触发 requestChild 事件时存储在状态中的每一行。
| 姓名 | 职位 | 办公室 | 薪资 | |
|---|---|---|---|---|
| 姓名 | 职位 | 办公室 | 薪资 |
- JavaScript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
下面显示的 JavaScript 用于初始化此示例中显示的表格
// 行详细信息的格式化函数 - 根据需要修改 function format(d) { // `d` 是行的原始数据对象 return ( '<dl>' + '<dt>全名：</dt>' + '<dd>' + d.name + '</dd>' + '<dt>分机号码：</dt>' + '<dd>' + d.extn + '</dd>' + '<dt>额外信息：</dt>' + '<dd>以及此处任何其他详细信息（图像等）...</dd>' + '</dl>' ); } var table = $('#example').DataTable({ ajax: '../data/objects.txt', columns: [ { className: 'dt-control', orderable: false, data: null, defaultContent: '' }, { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'salary' } ], layout: { topStart: { buttons: ['createState', 'savedStates'] } }, order: [[1, 'asc']], rowId: 'id' }); // 用于恢复子行的状态处理 table.on('requestChild', function (e, row) { row.child(format(row.data())).show(); }); // 添加用于打开和关闭详细信息的事件监听器 table.on('click', 'tbody td.dt-control', function () { var tr = $(this).closest('tr'); var row = table.row(tr); if (row.child.isShown()) { // 此行已打开 - 关闭它 row.child.hide(); } else { // 打开此行 row.child(format(row.data())).show(); } });
// 行详细信息的格式化函数 - 根据需要修改 function format(d) { // `d` 是行的原始数据对象 return ( '<dl>' + '<dt>全名：</dt>' + '<dd>' + d.name + '</dd>' + '<dt>分机号码：</dt>' + '<dd>' + d.extn + '</dd>' + '<dt>额外信息：</dt>' + '<dd>以及此处任何其他详细信息（图像等）...</dd>' + '</dl>' ); } let table = new DataTable('#example', { ajax: '../data/objects.txt', columns: [ { className: 'dt-control', orderable: false, data: null, defaultContent: '' }, { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'salary' } ], layout: { topStart: { buttons: ['createState', 'savedStates'] } }, order: [[1, 'asc']], rowId: 'id' }); // 用于恢复子行的状态处理 table.on('requestChild', function (e, row) { row.child(format(row.data())).show(); }); // 添加用于打开和关闭详细信息的事件监听器 table.on('click', 'tbody td.dt-control', function (e) { let tr = e.target.closest('tr'); let row = table.row(tr); if (row.child.isShown()) { // 此行已打开 - 关闭它 row.child.hide(); } else { // 打开此行 row.child(format(row.data())).show(); } });
除了上述代码外，以下 JavaScript 库文件也已加载以供此示例使用
下面显示的 HTML 是原始 HTML 表格元素，在 DataTables对其进行增强之前
此示例使用了一些超出库文件（如下）加载的额外 CSS，以便正确显示表格。下面显示了使用的额外 CSS
td.details-control { background: url('../resources/details_open.png') no-repeat center center; cursor: pointer; } tr.shown td.details-control { background: url('../resources/details_close.png') no-repeat center center; }
以下 CSS 库文件已加载以供此示例使用，以提供表格的样式
此表格通过 Ajax 加载数据。下面显示了已加载的最新数据。随着加载任何其他数据，此数据将自动更新。
用于执行此表格服务器端处理的脚本如下所示。请注意，这只是一个使用 PHP 的示例脚本。可以使用任何语言编写服务器端处理脚本，使用 DataTables 文档中描述的协议。