jQuery プラグイン DataTables のページネーションカスタマイズの方法

2021年5月11日 2021年5月11日

tks2

DataTables

HTMLで表を利用するとき、jQueryのプラグインであるDataTablesを利用すると、より多彩な表現をすることができるので、利用している方も多いと思います。

その中でも、テーブル設定を変更するだけで簡単にページネーションの機能を実装できるのは、プログラマーにとって非常にありがたいです。
しかも標準で9種類の表現ができ、基本的にはこれで困ることはないでしょう。

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

しかしクライアントの要望により、これら標準ではない表現をする場合どうすればいいのでしょうか。実はDataTablesではこのページネーションをカスタマイズすることができます。
今回はそのDataTables ページネーションのカスタマイズ方法を紹介したいと思います。

利用可能なパーツ

DataTables 標準のページネーションには次の9種類があり、 pagetype を変更するだけで切り替えることができます。
ここで利用されているパーツに注目しましょう。ページネーションには5つのパーツが利用されています。

first … 先頭へ移動
previous … 前へ移動
ページ数 (ページ数内で "ellipsis" を指定すると「...」と表示)
next … 次へ移動
last … 最後へ移動

カスタマイズするときも、これらのパーツが利用可能です。

ページネーションのカスタマイズ

それで pagetype に新しく custom を追加しましょう。
新しく作るページネーションの仕様は、次のような内容にします。

previous, next, ページ数の3つを利用し、ページ数のボタンは3つとする
previous, next が有効でないときは、それを表示しない
previous, next はシンプルにそれぞれ ≪, ≫ と表示する

それでは具体的にソースコードを示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Country Code</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
</head>
<body>
<table id="table_id" class="display">
    <thead><tr><th>Name</th><th>Code</th></tr></thead>
    <tbody></tbody>
</table>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
<script type="text/javascript">
    //テーブルに表示するデータ
    var data = [['Iceland', 'ISL'],['Ireland', 'IRL'],['Azerbaijan', 'AZE'],['Afghanistan', 'AFG'],['United States of America', 'USA'],['Virgin Islands (U.S.)', 'VIR'],['American Samoa', 'ASM'],['United Arab Emirates', 'ARE'],['Algeria', 'DZA'],['Argentina', 'ARG'],['Aruba', 'ABW'],['Albania', 'ALB'],['Armenia', 'ARM'],['Anguilla', 'AIA'],['Angola', 'AGO'],['Antigua and Barbuda', 'ATG'],['Andorra', 'AND'],['Yemen', 'YEM'],['United Kingdom of Great Britain and Northern Ireland', 'GBR'],['British Indian Ocean Territory', 'IOT'],['Virgin Islands (British)', 'VGB'],['Israel', 'ISR'],['Italy', 'ITA'],['Iraq', 'IRQ'],['Iran (Islamic Republic of)', 'IRN'],['India', 'IND'],['Indonesia', 'IDN'],['Wallis and Futuna', 'WLF'],['Uganda', 'UGA'],['Ukraine', 'UKR'],['Uzbekistan', 'UZB'],['Uruguay', 'URY'],['Ecuador', 'ECU'],['Egypt', 'EGY'],['Estonia', 'EST'],['Eswatini', 'SWZ'],['Ethiopia', 'ETH'],['Eritrea', 'ERI'],['El Salvador', 'SLV'],['Australia', 'AUS'],['Austria', 'AUT'],['Åland Islands', 'ALA'],['Oman', 'OMN'],['Netherlands', 'NLD'],['Ghana', 'GHA'],['Cabo Verde', 'CPV'],['Guernsey', 'GGY'],['Guyana', 'GUY'],['Kazakhstan', 'KAZ'],['Qatar', 'QAT'],['United States Minor Outlying Islands', 'UMI'],['Canada', 'CAN'],['Gabon', 'GAB'],['Cameroon', 'CMR'],['Gambia', 'GMB'],['Cambodia', 'KHM'],['North Macedonia', 'MKD'],['Northern Mariana Islands', 'MNP'],['Guinea', 'GIN'],['Guinea-Bissau', 'GNB'],['Cyprus', 'CYP'],['Cuba', 'CUB'],['Curaçao', 'CUW'],['Greece', 'GRC'],['Kiribati', 'KIR'],['Kyrgyzstan', 'KGZ'],['Guatemala', 'GTM'],['Guadeloupe', 'GLP'],['Guam', 'GUM'],['Kuwait', 'KWT'],['Cook Islands', 'COK'],['Greenland', 'GRL'],['Christmas Island', 'CXR'],['Grenada', 'GRD'],['Croatia', 'HRV'],['Cayman Islands', 'CYM'],['Kenya', 'KEN'],['Côte d\'Ivoire', 'CIV'],['Cocos (Keeling) Islands', 'CCK'],['Costa Rica', 'CRI'],['Comoros', 'COM'],['Colombia', 'COL'],['Congo', 'COG'],['Congo, Democratic Republic of the', 'COD'],['Saudi Arabia', 'SAU'],['South Georgia and the South Sandwich Islands', 'SGS'],['Samoa', 'WSM'],['Sao Tome and Principe', 'STP'],['Saint Barthélemy', 'BLM'],['Zambia', 'ZMB'],['Saint Pierre and Miquelon', 'SPM'],['San Marino', 'SMR'],['Saint Martin (French part)', 'MAF'],['Sierra Leone', 'SLE'],['Djibouti', 'DJI'],['Gibraltar', 'GIB'],['Jersey', 'JEY'],['Jamaica', 'JAM'],['Georgia', 'GEO'],['Syrian Arab Republic', 'SYR'],['Singapore', 'SGP'],['Sint Maarten (Dutch part)', 'SXM'],['Zimbabwe', 'ZWE'],['Switzerland', 'CHE'],['Sweden', 'SWE'],['Sudan', 'SDN'],['Svalbard and Jan Mayen', 'SJM'],['Spain', 'ESP'],['Suriname', 'SUR'],['Sri Lanka', 'LKA'],['Slovakia', 'SVK'],['Slovenia', 'SVN'],['Seychelles', 'SYC'],['Equatorial Guinea', 'GNQ'],['Senegal', 'SEN'],['Serbia', 'SRB'],['Saint Kitts and Nevis', 'KNA'],['Saint Vincent and the Grenadines', 'VCT'],['Saint Helena, Ascension and Tristan da Cunha', 'SHN'],['Saint Lucia', 'LCA'],['Somalia', 'SOM'],['Solomon Islands', 'SLB'],['Turks and Caicos Islands', 'TCA'],['Thailand', 'THA'],['Korea, Republic of', 'KOR'],['Taiwan, Province of China', 'TWN'],['Tajikistan', 'TJK'],['Tanzania, United Republic of', 'TZA'],['Czechia', 'CZE'],['Chad', 'TCD'],['Central African Republic', 'CAF'],['China', 'CHN'],['Tunisia', 'TUN'],['Korea, Democratic People\'s Republic of', 'PRK'],['Chile', 'CHL'],['Tuvalu', 'TUV'],['Denmark', 'DNK'],['Germany', 'DEU'],['Togo', 'TGO'],['Tokelau', 'TKL'],['Dominican Republic', 'DOM'],['Dominica', 'DMA'],['Trinidad and Tobago', 'TTO'],['Turkmenistan', 'TKM'],['Turkey', 'TUR'],['Tonga', 'TON'],['Nigeria', 'NGA'],['Nauru', 'NRU'],['Namibia', 'NAM'],['Antarctica', 'ATA'],['Niue', 'NIU'],['Nicaragua', 'NIC'],['Niger', 'NER'],['Japan', 'JPN'],['Western Sahara', 'ESH'],['New Caledonia', 'NCL'],['New Zealand', 'NZL'],['Nepal', 'NPL'],['Norfolk Island', 'NFK'],['Norway', 'NOR'],['Heard Island and McDonald Islands', 'HMD'],['Bahrain', 'BHR'],['Haiti', 'HTI'],['Pakistan', 'PAK'],['Holy See', 'VAT'],['Panama', 'PAN'],['Vanuatu', 'VUT'],['Bahamas', 'BHS'],['Papua New Guinea', 'PNG'],['Bermuda', 'BMU'],['Palau', 'PLW'],['Paraguay', 'PRY'],['Barbados', 'BRB'],['Palestine, State of', 'PSE'],['Hungary', 'HUN'],['Bangladesh', 'BGD'],['Timor-Leste', 'TLS'],['Pitcairn', 'PCN'],['Fiji', 'FJI'],['Philippines', 'PHL'],['Finland', 'FIN'],['Bhutan', 'BTN'],['Bouvet Island', 'BVT'],['Puerto Rico', 'PRI'],['Faroe Islands', 'FRO'],['Falkland Islands (Malvinas)', 'FLK'],['Brazil', 'BRA'],['France', 'FRA'],['French Guiana', 'GUF'],['French Polynesia', 'PYF'],['French Southern Territories', 'ATF'],['Bulgaria', 'BGR'],['Burkina Faso', 'BFA'],['Brunei Darussalam', 'BRN'],['Burundi', 'BDI'],['Viet Nam', 'VNM'],['Benin', 'BEN'],['Venezuela (Bolivarian Republic of)', 'VEN'],['Belarus', 'BLR'],['Belize', 'BLZ'],['Peru', 'PER'],['Belgium', 'BEL'],['Poland', 'POL'],['Bosnia and Herzegovina', 'BIH'],['Botswana', 'BWA'],['Bonaire, Sint Eustatius and Saba', 'BES'],['Bolivia (Plurinational State of)', 'BOL'],['Portugal', 'PRT'],['Hong Kong', 'HKG'],['Honduras', 'HND'],['Marshall Islands', 'MHL'],['Macau', 'MAC'],['Madagascar', 'MDG'],['Mayotte', 'MYT'],['Malawi', 'MWI'],['Mali', 'MLI'],['Malta', 'MLT'],['Martinique', 'MTQ'],['Malaysia', 'MYS'],['Isle of Man', 'IMN'],['Micronesia (Federated States of)', 'FSM'],['South Africa', 'ZAF'],['South Sudan', 'SSD'],['Myanmar', 'MMR'],['Mexico', 'MEX'],['Mauritius', 'MUS'],['Mauritania', 'MRT'],['Mozambique', 'MOZ'],['Monaco', 'MCO'],['Maldives', 'MDV'],['Moldova, Republic of', 'MDA'],['Morocco', 'MAR'],['Mongolia', 'MNG'],['Montenegro', 'MNE'],['Montserrat', 'MSR'],['Jordan', 'JOR'],['Lao People\'s Democratic Republic', 'LAO'],['Latvia', 'LVA'],['Lithuania', 'LTU'],['Libya', 'LBY'],['Liechtenstein', 'LIE'],['Liberia', 'LBR'],['Romania', 'ROU'],['Luxembourg', 'LUX'],['Rwanda', 'RWA'],['Lesotho', 'LSO'],['Lebanon', 'LBN'],['Réunion', 'REU'],['Russian Federation', 'RUS'],];

    //テーブル設定
    $(function() {
        $('#table_id').DataTable({
            data: data,
            language: {
                paginate: {
                    'previous': '≪',
                    'next': '≫'
                }
            },
            pagingType: 'custom',
        });
    });

    //PaginationType: custom の処理
    $.fn.DataTable.ext.pager.custom = function (page, pages) {
        var numbers = [];

        if (pages <= 3) {
            //全ページ数がボタン数に収まる場合
            for (var i = 0; i < pages; i++) {
                numbers.push(i);
            }
            numbers.DT_el = 'span';
            return [numbers];

        } else if (page === 0) {
            //最初のページの場合
            numbers.push(0);
            numbers.push(1);
            numbers.push(2);
            numbers.DT_el = 'span';
            return [numbers, 'next'];

        } else if (page === pages - 1) {
            //最後のページの場合
            numbers.push(page - 2);
            numbers.push(page - 1);
            numbers.push(page);
            numbers.DT_el = 'span';
            return ['previous', numbers];

        } else {
            //途中のページの場合
            numbers.push(page - 1);
            numbers.push(page);
            numbers.push(page + 1);
            numbers.DT_el = 'span';
            return ['previous', numbers, 'next'];
        }
    };
</script>
</body>
</html>

新しい pagetype である custom は、35行目からはじまる関数で定義しました。引数は2つあり、第1引数 page は「表示するページ」、第2引数 pages は「全ページ数」です。「表示するページ」は0から始まるので注意してください。
また戻り値は、パーツを配列で返します。配列の中では、決められた文字列のみをセットしてください。
前のページに移動するボタンを「≪」としたい場合でも、ここで返す値は「previous」とします。

そして30行目のように DataTablesの設定で pagetype: custom,
と指定しているだけです。
また、 previous, next も26, 27行目のように DataTables の設定で変更しています。

上記を実行すると次のように表示されます。

表の最下部にカスタマイズしたページネーションが表示されていることが判りますね。

まとめ

今回は DataTables ページネーションのカスタマイズについて紹介しました。
上記のように、簡単にカスタマイズできることを理解して頂けたものと思います。
同様な方法でお好みのページネーションを作ってください。

カテゴリー: ソフトウェア

タグ: DataTables JavaScript jQuery pagination ページネーション

Raspberry Pi 4 が映像出力できない意外な盲点

DataTablesに簡単にチェックボックスを追加できる Checkboxes