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

JavaScript

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

投稿日:2022年03月11日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

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のセレクターの種類と使い方

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は用意されているオプションを設定することで細かなカスタマイズを行うことが可能です。

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

プレビュー

他にもcolumnDefsを使って列ごとに幅を指定する方法があります。詳しくは公式サイトのページをご確認下さい。

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