Zenn
🍣

DataTablesの使い方

2021/07/16に公開
CSS
HTML
JavaScript
jQuery
tech

DataTablesの使い方

DataTablesの使い方をサンプルコードを用いて解説していきます。DataTablesを使用すれば、表の作成からそれに付随する機能であるソートやページング、検索なども備わっており、開発工数を減少させることができます。

DataTablesとは...?

DataTablesとは、jQeryのプラグインで、HTMLの<table>に対して簡単にソートやページングといった機能を提供する便利なツールです。また、見た目も良く、操作性に優れています。

DataTablesの導入

一番簡単な方法は、以下の公式ページからCDNを読み込みましょう。
https://datatables.net/

index.html
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/script.js"></script>
  • 注意点としては、datatablesのcdnはjqueryのcdnの後に記述するようにして下さい。そうしないと読み込みエラーとなります。
  • style.cssとscript.jsは自分で用意して下さい。

HTMLでテーブルの作成

次にHTMLでテーブルの作成をします。今回はサンプルということで、テーブルに予めデータを用意しておきます。

index.html
<table id="myTable">
    <thead>
        <tr><th>No</th><th>都道府県</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>北海道</td></tr>
        <tr><td>2</td><td>青森県</td></tr>
        <tr><td>3</td><td>岩手県</td></tr>
        <tr><td>4</td><td>宮城県</td></tr>
        <tr><td>5</td><td>秋田県</td></tr>
        <tr><td>6</td><td>山形県</td></tr>
        <tr><td>7</td><td>福島県</td></tr>
        <tr><td>8</td><td>茨城県</td></tr>
        <tr><td>9</td><td>栃木県</td></tr>
        <tr><td>10</td><td>群馬県</td></tr>
        <tr><td>11</td><td>埼玉県</td></tr>
        <tr><td>12</td><td>千葉県</td></tr>
        <tr><td>13</td><td>東京都</td></tr>
        <tr><td>14</td><td>神奈川県</td></tr>
        <tr><td>15</td><td>新潟県</td></tr>
        <tr><td>16</td><td>富山県</td></tr>
        <tr><td>17</td><td>石川県</td></tr>
        <tr><td>18</td><td>福井県</td></tr>
        <tr><td>19</td><td>山梨県</td></tr>
        <tr><td>20</td><td>長野県</td></tr>
        <tr><td>21</td><td>岐阜県</td></tr>
        <tr><td>22</td><td>静岡県</td></tr>
        <tr><td>23</td><td>愛知県</td></tr>
        <tr><td>24</td><td>三重県</td></tr>
        <tr><td>25</td><td>滋賀県</td></tr>
        <tr><td>26</td><td>京都府</td></tr>
        <tr><td>27</td><td>大阪府</td></tr>
        <tr><td>28</td><td>兵庫県</td></tr>
        <tr><td>29</td><td>奈良県</td></tr>
        <tr><td>30</td><td>和歌山県</td></tr>
        <tr><td>31</td><td>鳥取県</td></tr>
        <tr><td>32</td><td>島根県</td></tr>
        <tr><td>33</td><td>岡山県</td></tr>
        <tr><td>34</td><td>広島県</td></tr>
        <tr><td>35</td><td>山口県</td></tr>
        <tr><td>36</td><td>徳島県</td></tr>
        <tr><td>37</td><td>香川県</td></tr>
        <tr><td>38</td><td>愛媛県</td></tr>
        <tr><td>39</td><td>高知県</td></tr>
        <tr><td>40</td><td>福岡県</td></tr>
        <tr><td>41</td><td>佐賀県</td></tr>
        <tr><td>42</td><td>長崎県</td></tr>
        <tr><td>43</td><td>熊本県</td></tr>
        <tr><td>44</td><td>大分県</td></tr>
        <tr><td>45</td><td>宮崎県</td></tr>
        <tr><td>46</td><td>鹿児島県</td></tr>
        <tr><td>47</td><td>沖縄県</td></tr>
    </tbody>
</table>
  • <table>にidを付与して下さい。
  • 今回は都道府県のデータを用意しました。

DataTablesの使用

script.js
$(document).ready(function () {
    $('#myTable').DataTable();
});
  • idである#myTableを指定し、DataTable()を呼ぶだけです。

日本語化

デフォルトは英語のため、日本語にしてあげます。

script.js
$(document).ready(function () {
    $('#myTable').DataTable({
        // 日本語表示
        "language": {
            "url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
        }
    });
});
  • 日本語に変換するCDNをDataTable()の中で呼んであげます。

CSSによる装飾

CSSで装飾しないと少し味気ないので、テーブルに色をつけてあげます。この辺は好みですが。

style.scss
@charset "utf-8";

body {
    padding: 50px;
}

#myTable {
    thead tr {
        background-color: #CCCCCC;
    }

    tbody tr.odd {
        background-color: #FFFFFF;
    }

    tbody tr.even {
        background-color: #EEEEEE;
    }
}
  • テーブルのヘッダー部に#CCCCCC色を指定しています。
  • テーブルのボディー部に#FFFFFF色を指定しています。
  • テーブルのヘッダー部に#EEEEEE色を指定しています。

画面表示

ここでどういう画面になっているか確認してみましょう。

ソート

テーブルのヘッダー部である「No」や「都道府県」をクリックすれば、昇順、または降順でソートしてくれます。

表示件数

左上の「10」件表示のところをクリックすれば、「10」、「25」、「50」、「100」をデフォルトで選択できます。指定した件数でテーブルの行数を表示できます。

検索

右上にある検索欄に部分一致するものを絞り込んでくれます。

情報表示

左下に「〇〇件中〇から〇まで表示」というテーブル表示の情報を示してくれます。

ページング

右下にページング機能が備わっています。

ソース

最後にソースを載せておきます。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
    <link rel="stylesheet" href="css/destyle.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <title>DataTables</title>
</head>
<body>
<table id="myTable">
    <thead>
        <tr><th>No</th><th>都道府県</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>北海道</td></tr>
        <tr><td>2</td><td>青森県</td></tr>
        <tr><td>3</td><td>岩手県</td></tr>
        <tr><td>4</td><td>宮城県</td></tr>
        <tr><td>5</td><td>秋田県</td></tr>
        <tr><td>6</td><td>山形県</td></tr>
        <tr><td>7</td><td>福島県</td></tr>
        <tr><td>8</td><td>茨城県</td></tr>
        <tr><td>9</td><td>栃木県</td></tr>
        <tr><td>10</td><td>群馬県</td></tr>
        <tr><td>11</td><td>埼玉県</td></tr>
        <tr><td>12</td><td>千葉県</td></tr>
        <tr><td>13</td><td>東京都</td></tr>
        <tr><td>14</td><td>神奈川県</td></tr>
        <tr><td>15</td><td>新潟県</td></tr>
        <tr><td>16</td><td>富山県</td></tr>
        <tr><td>17</td><td>石川県</td></tr>
        <tr><td>18</td><td>福井県</td></tr>
        <tr><td>19</td><td>山梨県</td></tr>
        <tr><td>20</td><td>長野県</td></tr>
        <tr><td>21</td><td>岐阜県</td></tr>
        <tr><td>22</td><td>静岡県</td></tr>
        <tr><td>23</td><td>愛知県</td></tr>
        <tr><td>24</td><td>三重県</td></tr>
        <tr><td>25</td><td>滋賀県</td></tr>
        <tr><td>26</td><td>京都府</td></tr>
        <tr><td>27</td><td>大阪府</td></tr>
        <tr><td>28</td><td>兵庫県</td></tr>
        <tr><td>29</td><td>奈良県</td></tr>
        <tr><td>30</td><td>和歌山県</td></tr>
        <tr><td>31</td><td>鳥取県</td></tr>
        <tr><td>32</td><td>島根県</td></tr>
        <tr><td>33</td><td>岡山県</td></tr>
        <tr><td>34</td><td>広島県</td></tr>
        <tr><td>35</td><td>山口県</td></tr>
        <tr><td>36</td><td>徳島県</td></tr>
        <tr><td>37</td><td>香川県</td></tr>
        <tr><td>38</td><td>愛媛県</td></tr>
        <tr><td>39</td><td>高知県</td></tr>
        <tr><td>40</td><td>福岡県</td></tr>
        <tr><td>41</td><td>佐賀県</td></tr>
        <tr><td>42</td><td>長崎県</td></tr>
        <tr><td>43</td><td>熊本県</td></tr>
        <tr><td>44</td><td>大分県</td></tr>
        <tr><td>45</td><td>宮崎県</td></tr>
        <tr><td>46</td><td>鹿児島県</td></tr>
        <tr><td>47</td><td>沖縄県</td></tr>
    </tbody>
</table>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>
style.scss
@charset "utf-8";

body {
    padding: 50px;
}

#myTable {
    thead tr {
        background-color: #CCCCCC;
    }

    tbody tr.odd {
        background-color: #FFFFFF;
    }

    tbody tr.even {
        background-color: #EEEEEE;
    }
}
script.js
$(document).ready(function () {
    $('#myTable').DataTable({
        // 日本語表示
        "language": {
            "url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
        }
    });
});

Discussion