［HTML］DataTables（jQueryプラグイン）を使用して簡単テーブル作成

jQueryのプラグインであるDataTableを使用して簡単に見栄えの良いテーブルを作成できるので、紹介したいと思います。

過去のHTMLファイル作成とテーブル作成
DataTableの作成
- head内に追加する行
- body内に追加する行

過去のHTMLファイル作成とテーブル作成

こちらもローカルの環境で試せますので、触ってみていただければと思います。HTMLファイルの作成方法は、下記にあります。
komitunana.hatenablog.com

DataTableの作成

DataTableを使用してテーブルを作成すると下記のようなテーブルが作成できます。デフォルト設定でフィルタ機能や検索機能などが付いておりとても便利です。
f:id:komitunana:20190401091642p:plain

head内に追加する行

    <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/>
    <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
    <script>
      jQuery(function($){
        $("#test-table").DataTable({
        });
      });
    </script>

body内に追加する行

      <table id="test-table" class="table table-bordered" width="80%">
        <thead>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
        </tbody>
      </table>

画像にある全体のソースコードは下記になります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/>
    <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
    <script>
      jQuery(function($){
        $("#test-table").DataTable({
          /* ------------------------
          オプション一覧：https://www.datatables.net/reference/option/
          scrollX: true　（x軸にスクロールバーを付ける）
           ------------------------ */
        });
      });
    </script>
    <title>[タイトル]</title>
  </head>
  <body>
    <div align="center">
      <table id="test-table" class="table table-bordered" width="80%">
        <thead>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>