滚动和 Bootstrap 标签
此示例展示如何将带滚动的 DataTables 与 Bootstrap 标签 配合使用（亦或任何其他方法，即表在初始化时处于隐藏的 display:none 元素中）。
需要特别考虑的原因是，当 DataTable 在隐藏元素中初始化时，浏览器没有任何度量标准可以提供给 DataTable，在启用滚动时这会导致列错位。
将表显示时（即它具有尺寸）可通过 columns.adjust() 方法来更正此错位。
此示例展示如何使用 Bootstrap 的 shown.bs.tab 事件触发此方法调用。使用静态的 $.fn.dataTable.tables() 方法选择页面上的可见表，然后对它们运行 columns.adjust() 方法。
| 姓名 | 职位 | 办公室 | 分机号码 | 开始日期 | 年薪 |
|---|
| 姓名 | 职位 | 办公室 | 分机号码 | 开始日期 | 年薪 |
|---|
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
以下显示的 Javascript 用于初始化此示例中显示的表
$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) { DataTable.tables({ visible: true, api: true }).columns.adjust(); }); $('table.table').DataTable({ ajax: '../ajax/data/arrays.txt', paging: false, scrollCollapse: true, scrollY: 200 }); // 针对此演示对第二个表应用搜索 $('#myTable2').DataTable().search('New York').draw();
// 监听 Bootstrap 选项卡更改 document.querySelectorAll('button[data-bs-toggle="tab"]').forEach((el) => { el.addEventListener('shown.bs.tab', () => { DataTable.tables({ visible: true, api: true }).columns.adjust(); }); }); new DataTable('table.table', { ajax: '../ajax/data/arrays.txt', paging: false, scrollCollapse: true, scrollY: 200 }); // 针对此演示对第二个表应用搜索 new DataTable.Api('#myTable2').search('New York').draw();
除了上述代码，还加载了以下 Javascript 库文件以用于此示例
以下显示的 HTML 是原始 HTML 表元素，在 DataTables 增强之前
此示例使用了除了库文件中加载的内容之外的少量附加 CSS，以正确显示表。以下显示了使用的附加 CSS
加载以下 CSS 库文件用于此示例，以提供表的样式
此表通过 Ajax 加载数据。显示最新的已加载数据。随着其他任何数据的加载，此数据会自动更新。
以下显示用于执行此表的服务器端处理的脚本。请注意，此脚本只是一份使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写，使用 DataTables 文档中描述的协议。