服务器端处理
此示例演示如何在 DataTables 中使用 FixedColumns 与服务器端处理配合使用，以应对超大型表格。无需特殊的考量因素，只需正常初始化 FixedColumns！
请注意，此示例中对表格宽度进行了限制，以允许滚动发生，因为在此演示中，服务器端处理数据集的列数有限！
| 姓名 | 职位 | 办公室 | 分机号 | 入职日期 | 薪资 |
|---|---|---|---|---|---|
| 姓名 | 职位 | 办公室 | 分机号 | 入职日期 | 薪资 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 评论
下面显示的 Javascript 用于初始化此示例中显示的表格
$('#example').DataTable({ ajax: '../../../../examples/server_side/scripts/server_processing.php', fixedColumns: true, scrollCollapse: true, scrollY: 300, scrollX: true, serverSide: true });
new DataTable('#example', { ajax: '../../../../examples/server_side/scripts/server_processing.php', fixedColumns: true, scrollCollapse: true, scrollY: 300, scrollX: true, serverSide: true });
除了上述代码之外，还加载了以下 Javascript 库文件以在此示例中使用
下面显示的 HTML 是原始 HTML 表格元素，它还没有被 DataTables 增强
此示例使用了一些额外的 CSS 来正确显示表格，这些 CSS 超出了从库文件（如下所示）加载的 CSS。下面显示了所使用的额外 CSS
/* 确保演示表格滚动 */ th, td { white-space: nowrap; } div.dataTables_wrapper { width: 600px; margin: 0 auto; } /* 为单元格添加大量填充，因为 SSP 在演示中具有有限的数据 */ th, td { padding-left: 40px !important; padding-right: 40px !important; }
已加载以下 CSS 库文件以在此示例中使用，以提供表格的样式
此表格通过 Ajax 加载数据。下面显示了已加载的最新数据。当加载任何额外数据时，这些数据将自动更新。
下面显示了用于对此表格执行服务器端处理的脚本。请注意，这只是使用 PHP 的一个示例脚本。服务器端处理脚本可以用任何语言编写，方法是使用 DataTables 文档中描述的协议。