【導入実績300社以上】AWS 構築・運用保守サービス

【導入実績300社以上】AWS 構築・運用保守サービス

【サーバー管理不要】WordPress専用クラウド『WebSpeed』

【サーバー管理不要】WordPress専用クラウド『WebSpeed』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【コミュニケーションアプリ開発】LINE アプリ開発サービス

【コミュニケーションアプリ開発】LINE アプリ開発サービス

【ECサイト構築】Shopify カスタムアプリ開発サービス

【ECサイト構築】Shopify カスタムアプリ開発サービス

【音声アプリ開発】Twilio アプリ開発サービス

【音声アプリ開発】Twilio アプリ開発サービス

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【CPU】AMD EPYC 技術検証(PoC)サービス

【CPU】AMD EPYC 技術検証(PoC)サービス

【Webシステム / サービス開発】SAKARAKU Lab(セカラクラボ)

【Webシステム / サービス開発】SAKARAKU Lab(セカラクラボ)

【取材記事】サーバー系企業ビヨンドが サーバーサイドエンジニアを募集中

【取材記事】サーバー系企業ビヨンドが サーバーサイドエンジニアを募集中

【対談記事】「やっぱクラウド移設っていいですよね」マイネット × ビヨンド エンジニア対談

【対談記事】「やっぱクラウド移設っていいですよね」マイネット × ビヨンド エンジニア対談

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

DataTables のページネーションボタンを変更する

こんにちは、Webシステム部の長谷です。

前回はDataTablesの表示速度を速くする方法について書かせていただきましたが、今回はページネーションボタンの表示変更方法について書こうと思います。

はじめに

DataTablesにはデフォルトで以下の画像ようにページネーションボタンが表示されています。

実はこのページネーションボタンの表示を変更することができます。

といっても公式のドキュメントにはちゃんと記載されているのですが、英語で書かれており日本語で紹介している記事が意外となかったので、せっかくなのでここで紹介したいと思います。

方法

方法はとても簡単です。

pagingType をオプションとして追加し、引数を指定してあげるだけです。

■ jQuery

jQuery(function($){
    $("table.datatable").DataTable({
        // ページネーションボタンの表示
        "pagingType": "simple_numbers"
    }); 
});

上記コードでいうと、simple_numbersのところです。
ここを変えることで、ページネーションボタンの表示を色々と変えることができます。

以下、指定可能な引数を紹介します。

simple_numbers

「前」「次」ボタン、ページ番号で構成されます。

pagingTypeオプションを設定しなかった場合、自動的にこの設定となります。

■ jQuery

jQuery(function($){
    $("table.datatable").DataTable({
        // ページネーションボタンの表示
        "pagingType": "simple_numbers"
    }); 
});

■ 表示

numbers

ページ番号ボタンのみで構成されます。

■ jQuery

jQuery(function($){
    $("table.datatable").DataTable({
        // ページネーションボタンの表示
        "pagingType": "numbers"
    }); 
});

■ 表示

simple

「前」「次」ボタンのみで構成されます。

■ jQuery

jQuery(function($){
    $("table.datatable").DataTable({
        // ページネーションボタンの表示
        "pagingType": "simple"
    }); 
});

■ 表示

full

「先頭」「前」「次」「最終」ボタンで構成されます。

■ jQuery

jQuery(function($){
    $("table.datatable").DataTable({
        // ページネーションボタンの表示
        "pagingType": "full"
    }); 
});

■ 表示

full_numbers

「先頭」「前」「次」「最終」ボタン、ページ番号で構成されます。

■ jQuery

jQuery(function($){
    $("table.datatable").DataTable({
        // ページネーションボタンの表示
        "pagingType": "full_numbers"
    }); 
});

■ 表示

first_last_numbers

「先頭」「最終」ボタン、ページ番号で構成されます。

■ jQuery

jQuery(function($){
    $("table.datatable").DataTable({
        // ページネーションボタンの表示
        "pagingType": "first_last_numbers"
    }); 
});

■ 表示

以上の6つがあります。

また、プラグインを追加することで、上記以外の設定をすることも可能です。
今回は使えそうなものを抜粋して紹介します。

input

「先頭」「前」「次」「最終」ボタン、input タグでのページ指定で構成されます。

■ プラグイン

<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.20/pagination/input.js"></script>

■ jQuery

jQuery(function($){
    $("table.datatable").DataTable({
        // ページネーションボタンの表示
        "pagingType": "input"
    }); 
});

■ 表示

listbox

selectボックスでのページ指定になります。

■ プラグイン

<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.20/pagination/select.js"></script>

■ jQuery

jQuery(function($){
    $("table.datatable").DataTable({
        // ページネーションボタンの表示
        "pagingType": "listbox"
    }); 
});

■ 表示

他にもプラグインはたくさんありますので、公式ドキュメントを参考にしてみてください。
https://datatables.net/plug-ins/pagination/

まとめ

このように簡単にページネーションボタンの表示を変更することができます。
ページ件数が多い場合は full_numbersにすることによってページ切り替えがやりやすくなると思うので、より便利になると思います。
ぜひ試してみてください。

最後に

私が所属するシステム開発のサービスサイト「SEKARAKU Lab(セカラク ラボ)」を開設しました。
ビヨンドは、サーバーの設計・構築から運用までをワンストップでお任せいただけますので、サーバーサイド開発でお困りの方はお気軽にお問い合わせください。
SEKARAKU Lab:[https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

以上となります。

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
0
読み込み中...
0 票, 平均: 0.00 / 10
6,191
facebook twitter はてなブックマーク

この記事をかいた人

About the author

長谷竜弥

新卒にて株式会社ビヨンドに入社。

Webシステム開発(Webサービス・デジタルコンテンツ・業務管理システム などのブラウザで動くサービス、システムの開発)や、ゲームAPI(アプリゲームとの通信部分のプログラム開発)を行っている。

また、Shopify のプライベート / カスタムアプリの開発も行っている。

元々は大阪オフィスに勤めていたが、2019年に横浜オフィスに転勤。
趣味は野球 / カラオケ / アニメ