FixedColumns 集成
此示例展示了 Scroller 与 FixedColumns 的协同工作。FixedColumns 能够将滚动表格的左侧和右侧的列 “冻结” 在位。初始化过程与常规操作完全相同，FixedColumns 和 Scroller 都可以使用所有标准选项。它们会自动检测是否一起使用。
此示例将表格的容器元素宽度设置为人工缩小，以强制水平滚动，以及用于 DataTables 的垂直滚动。
| ID | 姓氏 | 名字 | 邮政编码 | 国家 |
|---|
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 评论
以下显示的 Javascript 用于初始化此示例中所示的表格
$('#example').DataTable({ ajax: '../data/2500.txt', fixedColumns: true, scrollCollapse: true, scroller: true, scrollY: 200 });
new DataTable('#example', { ajax: '../data/2500.txt', fixedColumns: true, scrollCollapse: true, scroller: true, scrollY: 200 });
除了上面的代码之外，以下 Javascript 库文件也会加载到此示例中
以下显示的 HTML 是原始的 HTML 表格元素，在被 DataTables 增强之前
此示例使用了一些额外的 CSS，超出库文件（以下）中加载的 CSS，以便正确显示表格。以下显示了所使用的额外 CSS
/* 对于此示例，通过缩小表格宽度来强制 x 滚动 */ div.dt-container { width: 60%; margin: 0 auto; }
以下 CSS 库文件加载到此示例中，以提供表格的样式
此表格通过 Ajax 加载数据。以下显示了已加载的最新数据。当加载任何其他数据时，此数据将自动更新。
执行此表格的服务器端处理的脚本如下所示。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写，使用 DataTables 文档中描述的协议。