Select 集成
此示例演示 Scroller 和 DataTables 的 Select 扩展 之间的集成。在大多数情况下,这两个扩展提供了正交功能(即,它们不重叠),但它们执行的唯一一个区域是表格的信息元素。
在信息元素中 Select 将显示有关表格中所选项目的信息,而当用户滚动表格时,Scroller 将更新信息。此示例同时启用了 Scroller 和 Select,以展示它们如何一起使用。
ID | 名字 | 姓氏 | 邮政编码 | 国家/地区 |
---|
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 评论
下面显示的 Javascript 用于初始化此示例中显示的表格
$('#example').DataTable({ ajax: '../data/2500.txt', scrollCollapse: true, scroller: true, scrollY: 200, select: true });
new DataTable('#example', { ajax: '../data/2500.txt', scrollCollapse: true, scroller: true, scrollY: 200, select: true });
除了上述代码外,还加载了以下 Javascript 库文件以便在此示例中使用
下面显示的 HTML 是原始 HTML 表格元素,尚未通过 DataTables 进行增强
此示例使用了一点额外的 CSS,超出了从库文件(如下所示)加载的 CSS,以便正确显示表格。下面显示了所使用的其他 CSS
为了给表格设置样式,加载了以下 CSS 库文件以便在此示例中使用
此表格通过 Ajax 加载数据。下面显示已加载的最新数据。此数据将随加载的任何其他数据自动更新。
下面显示用于执行此表格的服务器端处理的脚本。请注意,这只是一个使用 PHP 的脚本示例。服务器端处理脚本可以使用任何语言编写,方法是使用 DataTables 文档中描述的协议。