DataTables(1.x 和 2.x) 固定表头和首列

#说明

DataTables 1.x 和 2.x 的使用方式不同，请仔细阅读。

特别注意，不同的 UI 选择不一样的的库，他们的依赖文件也完全不同，比如我使用 ABP，它内部默认使用 Bootstrap 5

固定表头#

适用于 1.x#

最简单的固定表头，就是设置表内容的高度（px），超出后出现滚动条：

$('#table').DataTable({
  // 这里给出的值可以是任何 CSS 单位，也可以是一个数字（在这种情况下，它将被视为像素度量），并应用于表格正文（即它不直接考虑页眉或页脚高度）。
  scrollY: 400,
})

https://datatables.net/reference/option/scrollY

IE11：https://stackoverflow.com/a/62605729/7712266

你也可以通过降低版本的方式在 DataTables 1.x 中使用 FixedHeader，最后一个支持的版本是 3.4.0，但这样需要引入该 extension 的 css 和 js，参考（使用说明参考下面 “适用于 2.x”）：https://datatables.net/download/release#FixedHeader

适用于 2.x#

网上一些文章提到的 fixedHeader: true 属性，目前需要 DataTables 2.x（降低版本也可以 1.x 中使用，最后一个支持的版本是 3.4.0，在 2.x 中类似 fixedHeader 等功能都以 extension 的形式存在，也就是说在使用前，除了需要引用 datatables，还需要额外引入依赖 extension 的代码，参考下载：

可以在这里查看所有的 extension： https://datatables.net/extensions/index

固定首列#

适用于 1.x 和 2.x#

在 DataTables 依赖后引入 FixedColumns extension：https://datatables.net/download/release#FixedColumns

如果是 DataTables 1.x，只能使用最后一个支持的版本 4.3.0，因为后续版本都需要 Database 2.x：

<abp-style src="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.bootstrap5.min.css" />
<abp-script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js" />
<abp-script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/fixedColumns.bootstrap5.min.js" />

最好是添加 npm 包：
不过需要注意，添加 npm 可能会导致 datatables.net-bs5 包的版本发生变化，因为这是项目中指明了 4.3.0 需要不低于多少版本的 datatables.net-bs5 包，这就导致可能会不兼容 datatables.net 包而报错，虽然这是为了兼容性，但很麻烦，我暂时使用的是 CDN 地址来引入。

在 Web 项目中打开终端，执行 yarn add datatables.net-fixedcolumns-bs5@4.3.0
在 Web\abp.resourcemapping.js 的 mappings 对象中添加：

"@node_modules/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css": "@libs/datatables.net-fixedcolumns-bs5/css/",
"@node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js": "@libs/datatables.net-fixedcolumns/js/",
"@node_modules/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.min.js": "@libs/datatables.net-fixedcolumns-bs5/js/",

执行 abp install-libs
替换 cdn 依赖：

<abp-style src="/libs/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css" />
<abp-script src="/libs/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js" />
<abp-script src="/libs/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.min.js" />

然后参考文档配置，这将会固定左侧第一列：

$('#table').DataTable({
  fixedColumns: true,
})

如果需要左右都固定，可以参考文档添加以下配置：

$('#table').DataTable({
  fixedColumns: {
      left: 1,
      right: 1
  },
})

需要注意的是 left 和 right 的值含义是固定左或右列的数量，而不是索引，设置 0 将不会固定