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 文档中描述的协议

      其他示例