jQuery DataTablesでタグ検索っぽいことをする

#やりたいこと

好きなYoutubeチャンネルの動画リストを取得していたら だいぶ動画が多くなってきたので、その一覧をDataTablesを使ってサクサク検索できるようにしました。

やってみると検索が思いのほか便利です。

そして、動画ごとに誰が出演しているかなどのタグ付けのようなことをしたくなってきました。

#前提条件

• DataTablesを使い続けたい（DBなどを使ったシステムにしない）
• タグをクリックすると検索され一覧が絞られて欲しい
• 検索用の列とかを見せたくない

#解決方法

タグ用データの列を用意し、消す

オプションで visible: falseを指定すると、その列は「見えなくなるが検索対象にはなる」ようので、これを利用しました。DataTablesのホスピタリティに感動しますね...。

jQuery(function($){
  dtable = $("#d-table").DataTable({
      order: [ [ 0, "desc" ] ],
      lengthChange: false,
      info: true,
      paging: false,
      columnDefs: [
          { targets: 2, visible: false },
          { targets: 0, width: 300 }
      ]
  });
});

後述のsearchを使うために、変数に入れておく必要があります。

タグ検索っぽいことをする

タグ検索っぽい動きとしては、タグをクリックすることでその内容がSearchフォームに入って検索される、みたいなことがしたいです。
これはDataTablesでは .search("文字").draw(); という書き方で実現できます。

// 特定の文字列を検索フォームに渡す
clickSearch = function(kwd){
  dtable.search(kwd).draw();
}

あとはテーブルの上あたりに

<a href="#" onclick="clickSearch ('[AAA]')">AAAさん</a>&nbsp;
<a href="#" onclick="clickSearch ('[BBB]')">BBBさん</a>&nbsp;
<a href="#" onclick="clickSearch ('[A]')">Aさん</a>&nbsp;

という感じでタグを書いておけば完成です。

テーブルのHTMLは以下の感じとなります。非表示にするタグのヘッダも、theadには適当に記載します。

<table id="d-table" class="table table-bordered">
  <thead><tr><th>更新</th><th>タイトル</th><th>tag</th></tr></thead>
  <tbody>
    <tr><td>2018-08-06 20:58:51</td> <td><a href='https://www.youtube.com/watch?v=XXXXXXXX485' target='_blank'>動画485</a></td><td> [AAA]</td></tr>
    <tr><td>2018-08-05 22:39:46</td> <td><a href='https://www.youtube.com/watch?v=XXXXXXXX484' target='_blank'>動画484</a></td><td> [BBB]</td></tr>
    <tr><td>2018-08-05 20:23:31</td> <td><a href='https://www.youtube.com/watch?v=XXXXXXXX483' target='_blank'>動画483</a></td><td> [A]</td></tr>
    <tr><td>2018-08-03 18:00:03</td> <td><a href='https://www.youtube.com/watch?v=XXXXXXXX482' target='_blank'>動画482</a></td><td> [AAA],[A]</td></tr>
    <tr><td>2018-07-31 18:00:04</td> <td><a href='https://www.youtube.com/watch?v=XXXXXXXX481' target='_blank'>動画481</a></td><td> [AAA],[BBB]</td></tr>
  </tbody>
</table>

できた

以上で、タグ検索っぽいことが実現できました。

「っぽい」部分

タグおよびデータを、今回の場合 [] のような動画タイトルで使われていないような記号で囲むことで動画タイトルに対しては事実上検索に引っかからないようにしています。また、タグ同士で部分一致も起きないようになっています。

この辺の泥臭さが「っぽい」部分となります。

ゆえに正式にサービスとして提供するには気乗りしなさがありますが、社内システムや社内ツールなどで開発速度と利便性を重視する場合は良いかもしれません。

サーバーサイドプログラミングやRDB等が不要でこうしたことが出来るのは一定のメリットがあるかもしれません。

余談

HTML上どうしても列を増やしたくない場合、、、どんな場合かは知りませんが、、、は今回のテーブルの「タイトル」のデータの後ろあたりにタグ用データをdisplay:noneでねじ込むことで同様のことができます。

<td><a href='https://www.youtube.com/watch?v=XXXXXXXX481' target='_blank'>動画481</a><span style='display:none'>[AAA],[BBB]</span></td>