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が最後のサポートされるバージョンですが、この場合、この拡張の CSS と JS をインポートする必要があります。参照（2.x に適用する方法については、以下の「2.x に適用」を参照してください）：https://datatables.net/download/release#FixedHeader

2.x に適用#

一部の記事では、 fixedHeader: true プロパティが言及されていますが、現在は DataTables 2.x が必要です（バージョン 1.x でも使用できますが、最後のサポートされるバージョンは3.4.0です）。fixedHeaderなどの機能は、拡張機能として存在するため、使用する前に datatables を参照するだけでなく、依存する拡張機能のコードも追加する必要があります。ダウンロードの参考：

すべての拡張機能はこちらで確認できます：https://datatables.net/extensions/index

固定列#

1.x と 2.x に適用#

DataTables の依存関係の後にFixedColumns拡張機能をインポートします：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を設定すると固定されません。