行详细信息
此示例展示了 DataTables 显示和隐藏附加到宿主表格中父行子行这一功能的使用。通常用于显示有关一行附加信息，特别是在宿主表格中，您希望传达关于一行比现有空间更多信息时。
以下示例展示了服务器端处理与第一列一起使用，且该列附带事件侦听器，它将切换子行的显示。这是使用 columns.data 和 columns.defaultContent 设置的，同时结合了 CSS 以显示一个带有背景图片的空白单元格，点击之后该图片可被点击。
事件处理程序使用 row().child 方法首先检查某行是否已显示，如果是则隐藏它，否则显示它。在此示例中，子行的内容由 format() 函数定义，但是您可以用它来替换您需要显示的内容，例如，可能包括用于获取额外显示信息的对服务器的 Ajax 调用。请注意，格式详细信息函数可以访问行的完整数据源对象，包括表格中未实际显示的信息（比如薪水参数）。
此外，此示例展示了与 客户端行详细信息示例 的细微差别。需要追踪每一行的唯一标识符，以便在表格重绘时自动重新打开行，此示例中使用的是行 id。在服务器端处理模式下，需要这样做，因为行会在每次绘制时自动销毁并重新创建。
| 名字 | 姓氏 | 职位 | 办公室 | |
|---|---|---|---|---|
| 名字 | 姓氏 | 职位 | 办公室 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 评论
下面显示的 Javascript 用于初始化此示例中显示的表格
函数格式 (d) { 返回（'全名：' + d.first_name + ' ' + d.last_name + '
' + '薪资：' + d.salary + '
' + '子行可以包含您希望的任何数据，包括链接、图像、内部表格等等。'）；} var table = $('#example').DataTable({ ajax: 'scripts/ids-objects.php', columns: [ { class: 'dt-control', orderable: false, data: null, defaultContent: '' }, { data: 'first_name' }, { data: 'last_name' }, { data: 'position' }, { data: 'office' } ], order: [[1, 'asc']], processing: true, serverSide: true }); // 跟踪显示行的 ID 的数组 var detailRows = []; $('#example tbody').on('click', 'tr td.dt-control', function () { var tr = $(this).closest('tr'); var row = table.row(tr); var idx = detailRows.indexOf(tr.attr('id')); if (row.child.isShown()) { tr.removeClass('details'); row.child.hide(); // 从“打开”数组中移除 detailRows.splice(idx, 1); } else { tr.addClass('details'); row.child(format(row.data())).show(); // 添加到“打开”数组中 if (idx === -1) { detailRows.push(tr.attr('id')); } } }); // 在每次绘制时，循环遍历 “detailRows” 数组并显示任何子行 table.on('draw', function () { detailRows.forEach(function (id, i) { $('#' + id + ' td.dt-control').trigger('click'); }); });
函数格式 (d) { 返回（'全名：' + d.first_name + ' ' + d.last_name + '
' + '薪资：' + d.salary + '
' + '子行可以包含您希望的任何数据，包括链接、图像、内部表格等等。'）；} const table = new DataTable('#example', { ajax: 'scripts/ids-objects.php', columns: [ { class: 'dt-control', orderable: false, data: null, defaultContent: '' }, { data: 'first_name' }, { data: 'last_name' }, { data: 'position' }, { data: 'office' } ], order: [[1, 'asc']], processing: true, serverSide: true }); // 跟踪显示行的 ID 的数组 const detailRows = []; table.on('click', 'tbody td.dt-control', function () { let tr = event.target.closest('tr'); let row = table.row(tr); let idx = detailRows.indexOf(tr.id); if (row.child.isShown()) { tr.classList.remove('details'); row.child.hide(); // 从“打开”数组中移除 detailRows.splice(idx, 1); } else { tr.classList.add('details'); row.child(format(row.data())).show(); // 添加到“打开”数组中 if (idx === -1) { detailRows.push(tr.id); } } }); // 在每次绘制时，循环遍历 “detailRows” 数组并显示任何子行 table.on('draw', () => { detailRows.forEach((id, i) => { let el = document.querySelector('#' + id + ' td.dt-control'); if (el) { el.dispatchEvent(new Event('click', { bubbles: true })); } }); });
除了以上代码外，示例中还加载了以下 Javascript 库文件供使用
下面显示的 HTML 是在 DataTables 增强前原始的 HTML 表格元素
本示例除了加载自库文件（如下）之外，还使用了一点额外的 CSS，以便正确显示表格。下面显示所用的额外 CSS
示例中加载了以下 CSS 库文件，用于对表格进行样式设计
此表格通过 Ajax 加载数据。最新加载的数据显示在下面。随着加载任何附加数据，此数据将会自动更新。
为表格执行服务器端处理所使用的脚本如下所示。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写的，并可以使用 DataTables 文档中描述的协议。