多张表
以下示例展示了两个经过 DataTables 强化过的表，均已启用 FixedHeader。我们仅需在初始化这两张表的 DataTables 时设置 fixedHeader 选项即可做到这一点。
此示例还显示了这两张表的页脚已固定。
| 姓名 | 职位 | 办公室 | 年龄 | 薪资 |
|---|---|---|---|---|
| Tiger Nixon | 系统架构师 | Edinburgh | 61 | $320,800 |
| Cedric Kelly | 高级 JavaScript 开发者 | Edinburgh | 22 | $433,060 |
| Sonya Frost | 软件工程师 | Edinburgh | 23 | $103,600 |
| Quinn Flynn | 支持主管 | Edinburgh | 22 | $342,000 |
| Dai Rios | 人事主管 | Edinburgh | 35 | $217,500 |
| Gavin Joyce | 开发者 | Edinburgh | 42 | $92,575 |
| Martena Mccray | 售后支持 | Edinburgh | 46 | $324,050 |
| Jennifer Acosta | 初级 JavaScript 开发者 | Edinburgh | 43 | $75,650 |
| Shad Decker | 地区负责人 | Edinburgh | 51 | $183,000 |
| 姓名 | 职位 | 办公室 | 年龄 | 薪资 |
| 姓名 | 职位 | 办公室 | 年龄 | 薪资 |
|---|---|---|---|---|
| Jena Gaines | 办公室经理 | London | 30 | $90,560 |
| Haley Kennedy | 高级营销设计师 | London | 43 | $313,500 |
| Tatyana Fitzpatrick | 地区负责人 | London | 19 | $385,750 |
| Michael Silva | 营销设计师 | London | 66 | $198,500 |
| Bradley Greer | 软件工程师 | London | 41 | $132,000 |
| Angelica Ramos | 首席执行官 (CEO) | London | 47 | $1,200,000 |
| Suki Burks | 开发者 | London | 53 | $114,500 |
| Prescott Bartlett | 技术作者 | London | 27 | $145,000 |
| Timothy Mooney | 办公室经理 | London | 37 | $136,200 |
| Bruno Nash | 软件工程师 | London | 38 | $163,500 |
| Hermione Butler | 地区负责人 | London | 47 | $356,250 |
| Lael Greer | 系统管理员 | London | 21 | $103,500 |
| 姓名 | 职位 | 办公室 | 年龄 | 薪资 |
- JavaScript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
以下是用于初始化此示例中显示的表的 JavaScript
$('table.display').DataTable({ fixedHeader: { header: true, footer: true } });
new DataTable('table.display', { fixedHeader: { header: true, footer: true } });
除了上述代码外，还加载了以下 JavaScript 库文件以用于此示例
以下是显示在此示例中的原始 HTML 表格元素，在被 DataTables 强化之前的内容
此示例使用了一点额外的 CSS，以正确显示表格，这些 CSS 超出从库文件加载的内容范围（如下所示）。以下是所用的额外 CSS
加载了以下 CSS 库文件以用于此示例，以设置该表的样式
此表通过 Ajax 加载数据。以下是已加载的最新数据。此数据将随着加载任何其他数据而自动更新。
以下是用 PHP 编写的用于执行此表的服务器端处理的脚本。请注意，这是一个示例脚本。服务器端处理脚本可以用任何语言编写，具体用法可参考 DataTables 文档中描述的协议。