datatable

title.rb

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>情報</th>
    </tr>
  </thead>
</table>

<script>
$(document).ready(function () {
  let data = [
    { name: "山田太郎", age: 28, job: "エンジニア" },
    { name: "佐藤花子", age: 34, job: "デザイナー" },
    { name: "鈴木一郎", age: 41, job: "マネージャー" }
  ];

  $("#example").DataTable({
    data: data,
    columns: [
      {
        data: null,
        render: function (data, type, row) {
          if (type === "display") {
            // 表示用
            return `
              <div><strong>名前:</strong> ${row.name}</div>
              <div><strong>年齢:</strong> ${row.age} 歳</div>
              <div><strong>職業:</strong> ${row.job}</div>
            `;
          }
          if (type === "sort") {
            // ソート用 → 年齢を基準に並べたい
            return row.age;
          }
          return row.age; // デフォルト
        }
      }
    ]
  });
});
</script>

title.rb

// セレクトボックスで並び替え
  $("#orderBy").on("change", function () {
    let colIndex = $(this).val();   // 選択した列番号
    table.order([colIndex, "asc"]).draw();
  });

title.rb

// 条件でソート対象を切り替える関数
function sortByCondition(keyword) {
  let colIndex;  // ソート対象の列
  let currentOrder = table.order();
  let direction = currentOrder[0][1]; // 昇降順を維持

  if (keyword === "age") {
    colIndex = 2;  // 年齢列
  } else if (keyword === "job") {
    colIndex = 3;  // 職業列
  } else {
    colIndex = 1;  // 名前列などその他
  }

  // ソート実行
  table.order([colIndex, direction]).draw();
}

title.rb

let currentOrder = table.order();
console.log(currentOrder);
// [[2, "asc"]]

式	意味
currentOrder	現在のソート状態全体（配列の配列）
currentOrder[0]	最初のソート対象列（[列番号, 昇降順]）
currentOrder[0][0]	最初のソート対象列の 列番号
currentOrder[0][1]	最初のソート対象列の 昇降順 ("asc"/"desc")

title.rb

let direction = currentOrder[0][1];

colIndex → 選択した列番号

direction → 既存の昇降順（asc/desc）を維持

.draw() → 表を更新

title.rb

table.order([colIndex, direction]).draw();

columnsの数を切り替える場合

title.rb

if ( $.fn.DataTable.isDataTable('#example') ) {
 $('#example').DataTable().destroy();
}

方法	使いどころ
.search()	単純文字列検索、全体 or 列指定
外部フォーム + .search()	ユーザーが入力した値でリアルタイム絞り込み
$.fn.dataTable.ext.search	複雑条件・複数列での絞り込み
searchCols	初期表示時に特定列で絞り込み

title.rb

$('#example').DataTable({
 data: data,
 columns: [...],
 searchCols: [
   null,      // 1列目は無視
   null,      // 2列目は無視
   { search: '25' },  // 3列目を初期で25に絞り込み
   null
 ]
});

title.rb

$('#filterDate').on('change', function() {
  let date = this.value; // yyyy-mm-dd
  table.column(1).search(date).draw(); // 2列目の値で絞り込み
});

title.rb

  function fn1(settings, data, dataIndex) {
  // settings : DataTableの設定情報
  // data     : 現在行の列データ（配列）
  // dataIndex: 元データ配列のインデックス

  if (条件に合えば) {
    return true;  // 表示
  } else {
    return false; // 非表示
  }
}

複数関数の追加も可能

title.rb

$.fn.dataTable.ext.search.push(fn1);
$.fn.dataTable.ext.search.push(fn2);