jQueryで特定セルをクリックした時にそのセルの内容で検索する

djangoでjQueryをいじっていたら結構難しかったのでメモ。
よく調べたらcellのdataを受け、searchに突っ込むだけですね。Reference様様。

スクリプト

sample.html

<script>
  // jQueryの関数書くところ。
  $(document).ready(function () {
    // id="dataTable"と付くtableを取得する。
    var table = $('#dataTable').DataTable();

    // クリック時のイベントを定義
    $('#dataTable').on('click', 'td', function () {
      // どの列がクリックされたか、列番号を取得(0から開始)
      var row_number = table.column(this).index();
      // 例えば3列目がクリックされたときに限定
      if (row_number == 2 ) {
        // クリックされたセルの内容を得る
        var data = table.cell(this).data();
        // セルの内容が空の時には処理しない
        if( data != undefined ){
          // 検索バーに文字列を突っ込み(search(data))、それで検索(draw())する。
          table.search(data).draw();
        }
      }
    });
  });
</script>

refs

• セルのデータを得るAPI
  • https://datatables.net/reference/api/cell().data()
• 列番号を得るAPI
  • https://datatables.net/reference/api/column().index()
• 検索に突っ込むところ
  • https://datatables.net/reference/api/search()
  • https://datatables.net/reference/api/draw()