DataTablesで列を非表示にするには？

DataTablesは、HTMLテーブルを高度な機能を持つインタラクティブなテーブルに変換できる、非常に強力で人気のあるjQueryプラグインです。データの表示、検索、ソート、ページネーションなどを簡単に行うことができます。しかし、大量のデータを表示する必要がある場合、テーブルが見づらくなることがあります。そのような場合、特定の列を非表示にすることで、テーブルを見やすくすることができます。

一部の列を非表示にする(columnDefs visible)

DataTablesで特定の列を非表示にするには、`columnDefs`オプションと`visible`プロパティを使用します。 `targets`プロパティで非表示にする列のインデックスを指定し、`visible`プロパティを`false`に設定します。

以下は、その方法を示す例です。

<!DOCTYPE html>
<html>
<head>
<title>DataTables 列非表示</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
  $('#myTable').DataTable( {
    "columnDefs": [
      {
        "targets": [ 2 ], // 3列目を非表示にする（0から始まる）
        "visible": false,
      },
    ]
  } );
} );
</script>
</head>
<body>

<table id="myTable" class="display">
  
    
      名前
      年齢
      メールアドレス
      住所
    
  
  
    
      田中太郎
      30
      [email protected]
      東京都〇〇区〇〇
    
    
      佐藤花子
      25
      [email protected]
      大阪府〇〇市〇〇
    
    
      鈴木一郎
      40
      [email protected]
      福岡県〇〇市〇〇
    
  


</body>
</html>

上記のコードでは、`targets`プロパティに`[2]`を指定することで、3列目（インデックスは0から始まるため）を非表示にしています。

参考資料

DataTables API - columnDefs.visible

よくある質問

Q1. 複数の列を非表示にするにはどうすればよいですか？

A1. `targets`プロパティに、非表示にする列のインデックスを配列で指定します。例えば、1列目と3列目を非表示にする場合は、`targets: [0, 2]`とします。

Q2. 特定の条件に基づいて列を非表示にすることはできますか？

A2. はい、`render`関数を使用することで、特定の条件に基づいて列を非表示にすることができます。詳しくは、DataTables API - columns.renderを参照してください。

Q3. 非表示にした列を後から表示することはできますか？

A3. はい、`column().visible()`メソッドを使用することで、非表示にした列を後から表示することができます。詳しくは、DataTables API - column().visible()を参照してください。

その他の参考記事:jquery table 編集