固定表头

在显示每页显示大量数据的表格时,将表格的表头和/或页脚固定在滚动窗口的顶部或底部可能很有用。这样一来,用户就能快速确定每列引用的是什么,而无需滚动到表格顶部。

FixedHeader 提供了使用 DataTables 表格执行此操作的功能。它通过从主机表格中分离表头和页脚元素并根据窗口的滚动位置将它们附加到屏幕的顶部或底部来实现此操作。这样可以确保 FixedColumns 与 DataTables 完全兼容,并且可以添加复杂交互,例如表格页脚中的搜索元素,就像使用任何其他表格一样。

下载

获取并使用 FixedHeader 最简单的方法是使用DataTables 下载构建器,在那里你可以选择要在页面上使用的软件,并为你创建和托管单个 Javascript 和 CSS 文件。

或者,也可以在你的页面中包含各个文件下载发布软件包,或在 GitHub 上克隆源代码管理信息库

初始化

可以通过两种不同的方式初始化 FixedHeader 并使用它

  • 将 DataTables 构造函数作为fixedHeader配置选项
  • 一个new构造函数

在 DataTables 中

可以通过使用 DataTables 选项对象中的fixedHeader选项在 DataTable 上初始化 FixedHeader - 这只是一个布尔值,尽管也可以使用对象进行精细控制(请参阅参考文档)

$('#myTable').DataTable( {
    fixedHeader: true
} );

构造函数

或者,可以在使用具有$.fn.dataTable.FixedHeader函数的 Javascript new关键字构造它之后,将 FixedHeader 添加到表格中。此函数需要两个参数

  1. 要将按钮应用到的 DataTable 实例
  2. FixedHeader 选项(这与为fixedHeader选项提供的选项相同)。
var table = $('#myTable').DataTable();

new $.fn.dataTable.FixedHeader( table, {
    // options
} );

特点

FixedHeader 为 DataTables 添加以下特点

  • 将表格标题固定在滚动窗口的顶部
  • (可选)将表格页脚固定在滚动窗口的底部
  • 与 Bootstrap 和其他 DataTables 支持的样式框架完全集成
  • 与其他 DataTables 扩展集成,如 Responsive 和 ColReorder