【大阪 / 横浜 / 徳島】インフラ / サーバーサイドエンジニア募集中!

【大阪 / 横浜 / 徳島】インフラ / サーバーサイドエンジニア募集中!

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

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

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【WordPress 専用】クラウドサーバー『ウェブスピード』

【WordPress 専用】クラウドサーバー『ウェブスピード』

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【予約システム開発】EDISONE カスタマイズ開発サービス

【予約システム開発】EDISONE カスタマイズ開発サービス

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

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

【200ヶ国以上に対応】グローバル eSIM「ビヨンドSIM」

【200ヶ国以上に対応】グローバル eSIM「ビヨンドSIM」

【中国への旅行・出張・駐在なら】中国SIMサービス「チョコSIM」

【中国への旅行・出張・駐在なら】中国SIMサービス「チョコSIM」

【グローバル専用サービス】北米・中国でも、ビヨンドのMSP

【グローバル専用サービス】北米・中国でも、ビヨンドのMSP

【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/)

以上となります。

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
1
読み込み中...
1 票, 平均: 1.00 / 11
13,312
X facebook はてなブックマーク pocket
【2025.6.30 Amazon Linux 2 サポート終了】Amazon Linux サーバー移行ソリューション

【2025.6.30 Amazon Linux 2 サポート終了】Amazon Linux サーバー移行ソリューション

この記事をかいた人

About the author

長谷竜弥

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

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

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

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