• HOME > 
  • Javascript > 
  • jQueryのDataTablesの使い方【初心者にもわかり...

jQueryのDataTablesの使い方【初心者にもわかりやすく解説】

投稿日:

DataTablesとは?

DataTablesは、HTMLで作成した表(table)にページ送りや絞り込み検索などの機能を簡単に実装することができるjQueryのライブラリです。

こういった表に関する機能は、通常であれば時間を掛けてプログラミングして作り込まなければできませんが、ライブラリを利用することで即座に導入することが可能です。

DataTables | Table plug-in for jQuery

DataTablesを導入すると、HTMLで作った表(テーブル)に次のような機能を簡単に実装することができます。

プレビュー

DataTablesの導入方法

それでは、DataTablesをサイトに読み込ませてテーブルに機能を実装する手順を説明していきます。

CDNで読み込む

DataTabelsは、公式サイトにCDNが用意されています。

トップページにある「CSS」と「Javascript」の両方のCDNをコピーして自身のサイトの<head></head>の中などに貼り付けてください。

なお、DataTabelsはjQueryを使用したライブラリになりますので、必ずjQueryより後に読み込ませるようにしてください。

CDN

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

記述の仕方

CDNでDataTablesの読み込みが完了したら、HTMLで表(テーブル)を作成しjQueryでDataTablesの機能を有効化させます。

HTMLでtableを作成する

まずは元となる表をHTMLのtableタグを使って作成します。

この時、theadとtbodyを記述して表を作るようにしてください。これらを使わずに表を作るとページ送りや絞り込みといったDataTablesの機能が表示されないので注意が必要です。

また、作成した表にはidもしくはクラスを付与しておいて下さい。DataTablesを有効にする際にセレクターとして使います。

HTML

<table id="target">
    <thead><th>ID</th><th>都道府県</th><th>ふりがな</th></thead>
    <tbody>
        <tr><th>1</th><td>北海道</td><td>ほっかいどう</td></tr>
        <tr><th>2</th><td>青森県</td><td>あおもりけん</td></tr>
        <tr><th>3</th><td>岩手県</td><td>いわてけん</td></tr>
        -省略-
        <tr><th>45</th><td>宮崎県</td><td>みやざきけん</td></tr>
        <tr><th>46</th><td>鹿児島県</td><td>かごしまけん</td></tr>
        <tr><th>47</th><td>沖縄県</td><td>おきなわけん</td></tr>
    </tbody>
</table>

DataTablesを有効化する

HTML側で元となるtableの用意ができたら、jQueryでDataTablesを有効化します。

テーブルに付与したidもしくはクラスをセレクターにしてtableを指定して下記のように記述します。

jQuery

$(document).ready(function(){
    $("#target").DataTable();
});

以上でDataTabelsの実装は完了です。しかし、この時点ではDataTablesの各機能の表記は英語になっており、表のデザインも枠線や色がついていない状態ですので調整していきます。

実装途中

DataTablesを日本語化する

公式サイトに用意されている翻訳データを読み込んでDataTablesの各機能の表記を日本語に変更します。

https://datatables.net/plug-ins/i18n/

※現時点で日本語への翻訳は全て完了していないようです。そのため一部の機能では英語表記のままになっています。

DataTablesの翻訳データをCDNで読み込む

公式サイトから取得するCDNは以下のようになっています。

CDN

https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json

翻訳データはjQueryのDataTablesのオプションとして追記して読み込みます。

jQuery

$(document).ready(function(){
    $("#target").DataTable({
        "language":{
            url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json",
        }
    });
});

CSSでスタイルを調整する

デフォルトでは色がついていない状態です。(別途スタイルシートを読み込んでいたり、ワードプレスのテーマを使っている場合には、そのスタイルが適用されている可能性もあります。)

ここでは、例として次のようなスタイルを記述しました。

CSS

/*表全体*/
.dataTable{
    border:solid 1px #999;
}
/*表のヘッダー*/
.dataTable thead,.dataTable thead th{
    background-color: #999 !important;
    color:#fff;
    border-bottom:none;
    margin-top: 5px;
}
.dataTable thead th{
    border:solid 1px #e9e9e9;
}
table.dataTable thead .sorting{/*ソートの矢印*/
    background-image: url(https://cdn.datatables.net/1.11.5/images/sort_both.png) !important;
}
/*表*/
.dataTable tbody tr:nth-child(odd) th,.dataTable tbody tr:nth-child(odd) td{/*行を交互に色分け*/
    background: #d9d9d9;
}
.dataTable tbody th,.dataTable tbody td{
    border:solid 1px #e9e9e9;
}
/*件数など*/
.dataTables_length,.dataTables_filter{
    margin-bottom:5px;
}

セレクターにoddを使うことで、行を交互に色分けすることができます。

リンク先のサムネイル
CSSのセレクターの種類と使い方

CSSのセレクタ―は、スタイルを適用させたいHTML要素の特定に使います。セレクタ―を使ってスタイルを指定することで、同じスタイルを使いまわしたり一部分にだけ違うスタイルを適用させることが可能になります...【もっと読む】

日本語表記への切替とスタイルの調整ができたら、以下のようなDataTablesを使った表が完成します。

プレビュー

DataTablesの機能

上記で完成した表をもとにDataTabelsで標準的に使用できる機能について説明していきます。

各機能はjQueryでオプションとして下記のように追記することで有効と無効を切り替えることが可能です。falseで無効化し、有効化したい時はtrueにするか記述を削除します。

jQuery

$(document).ready(function(){
    $("#target").DataTable({
        "language":{//日本語化
            url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json",
        },
        ordering:false,//並び替え
        searching:false,//絞り込み検索
        paging:false,//ページ送り(無効化すると表示件数も停止する)
        lengthChange:false,//表示件数
        info:false,//総件数
    });//end datatables
});//end ready

並び替え(ソート)機能

HTMLのtableのtheadで作った部分には矢印ボタンが表示され、クリックするたびに表の中身を昇降順に並び替えることができます。

矢印は各列に表示され、列ごとの基準で並び替えが行われます。

並び替え

表示件数切替機能

「10」「25」「50」「100」の中から1ページに表示するデータの行数を選択できます。表示件数が変わると自動的にページ送りのボタンの数も切り替わります。

表示件数切替

ページ送り機能

選択されている表示件数に応じてページ数が切り替わり、ボタンが表示されます。

ページ送り

絞り込み検索機能

指定の文字列が含まれているデータのみを表示することができます。

絞り込み検索

総件数表示機能

データの総件数とページ送りによって現在何件目のデータを表示しているかを確認することができます。

総件数表示

DataTablesのオプションの使い方

前述の機能の有効化無効化の切替を含め、DataTablesは用意されているオプションを設定することで細かなカスタマイズを行うことが可能です。

https://datatables.net/reference/option/

列の幅を変更する

テーブルの列の幅はcolumnsオプションを使って変更できます。

下記のように列ごとにwidthで幅を指定していきます。nullを記述した列は自動で幅が調整されます。

jQuery

$(document).ready(function(){
    $("#target").DataTable({
        "language":{//日本語化
            url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json",
        },
        "columns":[//列の幅を変更する
            {"width":"10%"},//1列目
            {"width":"70%"},//2列目
            null,//3列目
        ],
    });//end datatables
});//end ready

プレビュー

列の幅を変更
https://datatables.net/reference/option/columns.width

スクロールバーを表示する

オプションを設定すれば、スマホなどウインドウサイズ小さい場合でも縦長や横長の表が見やすいようにスクロールバーを表示することができます。

縦スクロールバーを表示する

縦スクロールバーは、「scrollY」オプションに高さを指定すれば使用できます。

なお、表示件数の切替によっては行数が少なくなり指定した高さを満たさないことがあります。そうした状況で発生させたくない場合は「scrollCollapse」も有効化させておきましょう。

jQuery

$(document).ready(function(){
    $("#target").DataTable({
        "language":{//日本語化
            url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json",
        },
        scrollY:"300px",
        scrollCollapse:true,//データ行数が少ない場合に調整する
});

プレビュー

横スクロールバーを表示

横スクロールバーを表示する

横スクロールバーは、「scrollX」オプションをtrueにして有効化すれば使用できます。

ただし、あらかじめ列の幅をピクセルで指定しておかないと正しく表示されないので注意が必要です。幅を指定していなかったり、%で指定した状態で有効化すると横スクロールバーも表示されず、レイアウトも崩れてしまいます。

jQuery

$(document).ready(function(){
    $("#target").DataTable({
        "language":{//日本語化
            url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json",
        },
        columns:[
            {"width":"300"},
            {"width":"500"},
            {"width":"500"}  
        ],
        scrollX:true,
});

プレビュー

横スクロールバーを表示

オプションに両方追記すれば、縦と横両方のスクロールバーを表示することも可能です。

DataTablesの拡張機能の使い方

DataTablesにはオプションだけでなく拡張機能も存在し、さらに高度な機能を使うことができます。

前述のオプションとは異なり、拡張機能を使うためには別のCDNを読み込ませる必要があります。

拡張機能ページで使いたい拡張機能にチェックを入れて、ページの一番下のCDNをコピーしてください。あとは最初と同じように読み込ませれば完了です。

https://datatables.net/download/

あとはjQueryで拡張機能を追記して有効化させれば使用することができます。

ここでは便利な拡張機能をいくつか紹介します。

オートフィル

オートフィル機能を有効にすると、エクセルのようにセルをドラッグしてコピーすることができるようになります。

各セルにカーソルを合わせると右下に青い四角マークが表示されるのでドラッグします。

なお、元のHTMLが書き換わるわけではありません。

jQuery

$(document).ready(function(){
    $("#target").DataTable({
        "language":{//日本語化
            url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json",
        },
        autoFill:true,//オートフィル
});

プレビュー

ヘッダーを固定する

fixedHeader機能を有効にすると縦にスクロールした時にtheadの部分(1行目)が固定されるようになります。

jQuery

$(document).ready(function(){
    $("#target").DataTable({
        "language":{//日本語化
            url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json",
        },
        fixedHeader:true,//テーブルヘッダーを固定
});

プレビュー

列を固定する

fixedColumn機能を有効化すると横にスクロールした時に列が固定されるようになります。

なお、列を固定させる為には横スクロールも有効にしておく必要があります。また、セルの背景色が指定されていないと重なって表示されてしまうので注意してください。

CSS

.dataTable tbody tr:nth-child(odd) .dtfc-fixed-left{
    background: #d9d9d9;
}
.dataTable tbody tr:nth-child(even) .dtfc-fixed-left{
    background: #fff;
}

jQuery

$(document).ready(function(){
    $("#target").DataTable({
        "language":{//日本語化
            url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json",
        },
        fixedColumns:true,//カラムを固定
});

プレビュー

列を指定して固定する

上記では自動的に左端の列が固定されましたが、任意の列を指定して固定表示させることも可能です。

左から数えて何番目の列を固定させるかを指定します。

jQuery

$(document).ready(function(){
    $("#target").DataTable({
        "language":{//日本語化
            url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json",
        },
        fixedColumns:{
            left:3,
        },//左から3番目のカラムを固定
});

出力ボタンを追加する

ボタン機能を有効化すると表のデータをクリップボードにコピーするボタンや、PDF化・エクセルファイル化・CSV化してダウンロードするボタン、印刷ボタンを設置することができます。

※日本語のデータはPDF化すると文字化けするのでご注意下さい。

jQuery

$(document).ready(function(){
    $("#target").DataTable({
        "language":{//日本語化
            url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json",
        },
        dom:"lBfrtip",//ボタン表示用
        buttons:[//ボタンの種類(PDFはデフォルトでは日本語は文字化けする)
            'copy','pdf','csv','excel','print',
        ],
});

プレビュー

https://datatables.net/extensions/index

まとめ

DataTablesにはソートや各種ファイル形式での出力などWEBサービスを作るときに役立つ機能が豊富に備わっています。これだけの機能を自作するとなるとかなりの労力を要しますので表(テーブル)を使う際は導入してみてはいかがでしょうか?

関連する記事

サムネイル

jQueryのblurでフォーカスが外れた時の処理を行う方法……

2023年05月01日
最終更新日:2023年05月31日
jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。
サムネイル

jQueryのinArray()で配列内を検索する方法【要素……

2023年05月01日
最終更新日:2023年05月31日
jQueryのinArrayメソッドは、配列の中に特定の要素が含まれているかどうかを検索することができるメソッドです。
サムネイル

JavascriptのindexOfで文字列を検索する方法【……

2023年05月01日
最終更新日:2023年05月31日
indexOfメソッドを使用すると、テキストや配列の中に指定の文字列が含まれているかどうかを検索することができます。条件分岐に利用することで、ある文字が含まれている時といない時とで処理を分けることが可能になります。
サムネイル

jQueryのclosest()で最も近い親要素を取得する方……

2023年05月01日
最終更新日:2023年04月17日
jQueryのclosest()は、要素から最も近い親要素を取得(指定)できるメソッドです。要素の親要素を辿っていき、該当するセレクターを持つものを見つけ出してくれます。
サムネイル

jQueryのprop()メソッドで属性値を取得・設定する方……

2023年04月04日
prop()は要素の属性値を取得したり、追加・変更することができるメソッドです。attrメソッドとの違いには「返り値が異なる」といった点があります。
サムネイル

jQueryでラジオボタンの値を取得や操作する方法【チェック……

2023年04月04日
jQueryを使えばHTMLのラジオボタンでユーザーが選択した(チェックされた)値を取得・操作することができます。propメソッドを使用して行います。
サムネイル

jQueryでaタグのhref(リンク先)を書き換える方法【……

2023年04月04日
最終更新日:2023年05月31日
aタグのhref(リンク先のURL)を書き換えたい場合は、attrメソッドを使用します。リンク先のURLの一部だけを書き換えたい時は、replaceメソッドで文字の置き換えを実行してからattrメソッドで書き換えるという方法になります。