說明#
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 將不會固定