【音ツツ】DataTablesというライブラリ【音ゲーツールを作ろう】#004

[2024/05/31]

今回で4回目になるこの企画ですが、ようやくプログラミングらしいことが始まります。

その前にこの企画の趣旨の確認ですが、プログラミングの入門の企画ではないです。
なので最初に「Hello World！」と表示してみましょうみたいなことはやりません。

DataTables

うちのサイトで公開しているツールのうち「beatmaniaIIDX INFINITAS Active Users」や「beatmaniaIIDX ノーツレーダー値」はよく似たデザイン（レイアウト）になっています。

その理由が「同じライブラリ（DataTables）を使っているから」です。

ライブラリっていうのは平たくいえばソフトみたいなものです。上のツールの場合はデータを読み込んで表示しています。そして何もせずとも検索やソートを実装ができてしまいます。

自分でソート機能やフィルター機能を作ってる訳ではなく、DataTablesというライブラリにそういう機能が付いているんです。

DataTables

「なるほどそのライブラリを使えばこういうのができるのか」とわかった人はこれ以上は読まなくてもOKだったりします。

何なら前回までの内容はこのライブラリを紹介するための前座だったとも言える。

とりあえず使ってみるexample

簡単な例（example）を作成しました。

【音ツツ】 #004用コード

上の表（#table-01）は何もしていない表。下の表（#table-02）はDataTablesを適用した表です。

何も設定はしていませんが、キーワード検索、タイトルバーで並び替え、表示件数とページネーション（ページ切替）が実装されました。

詳しく見ていくとまずDataTablesの読み込みをします。

DataTablesを使うためにはjQueryというものも必要になりますが、上のURLはjQueryも含まれているので別途読み込まなくても大丈夫です。同梱版ですね。

<table id="table-02">
<thead>
  <tr>
    <th>曲名</th>
    <th>アーティスト名</th>
    <th>SPB</th>
    <th>SPN</th>
    <th>SPH</th>
    <th>SPA</th>
    <th>SPL</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>5.1.1</td>
    <td>dj nagureo</td>
    <td></td>
    <td>2</td>
    <td>6</td>
    <td>10</td>
    <td></td>
  </tr>
  <tr>
    <td>冥</td>
    <td>Amuro vs Killer</td>
    <td>3</td>
    <td>5</td>
    <td>10</td>
    <td>12</td>
    <td></td>
  </tr>
</tbody>
</table>