[jQuery]プラグインなしでテーブルのページネーション

49930 ワード
テキストリンク

概要

プラグインを使用せずにテーブルのページネーションを行うサンプルコード（覚え書き）

大枠は、ほぼ
【JavaScript】リストのページネーション | Qiita
の通り。→ jQuery化＆テーブル版にし、最初/最終ページへの遷移も追加。

※完成版は以下のような感じ

コード

HTML

pagination.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>[jQuery]ページネーション・サンプル</title>
  <!-- cssファイルを読み込み -->
  <link rel="stylesheet" href="./css/pagination.css"> 
</head>
<body>
    <table class="menu_list" border="1" cellspacing="0" cellpadding="0" align="center">
        <thead>
            <tr>
                <td>名前</td>
                <td>価格（円; 税込）</td>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div id ="pagination_content">
        <ul class="pagination">
            <li id="first">&nbsp;<<&nbsp;</li>
            <li id="prev">&nbsp;<&nbsp;</li>
            <li class="count"></li>
            <li id="next">&nbsp;>&nbsp;</li>
            <li id="last">&nbsp;>>&nbsp;</li>
        </ul>
    </div>
    <!-- jQueryのCDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <!-- jsファイルを読み込み -->
  <script src="./js/pagination.js"></script>
</body>
</html>

CSS

それなりに見えるように調整（割と適当・・）

./css/pagination.css
#menu_list{
    margin:auto;
    width: 50%;
}


tr td:first-child{
    width: 250px;
}

tr td:last-child{
    width: 150px;
}

.menu_list thead tr td{
    font-weight: bold;
    background-color: #8EB8FF;
    text-align: center;
}

.menu_list tbody tr td:first-child{
    text-align: center;
}

.menu_list tbody tr td:last-child{
    text-align: right;
}

.pagination {
    list-style: none;
}

.pagination li {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #2C7CFF;
    border-radius: 3px;
    display: inline-block;
    margin: 0 0.5em;
    cursor: pointer;
}

.pagination .count {
    font-weight: normal;
    color: #000000;
    background-color: #FFFFFF;
}

#pagination_content{
    text-align: center;
}

JavaScript（jQuery）

参考ページのコードをjQuery化＆テーブル版に変更
最初/最終ページへの遷移も追加してみました
データは別途JSONファイルに記載してajaxで読み込む方式に

./js/pagination.js
let menu = {};
// JSONファイルのデータを読み込み: $.getJSONだとうまくいかないので、$.ajaxを使用
$.ajax({
	url: './json/menu.json',
	dataType: 'json',
	async: false,
	success: function(data) {
		menu = data;
	}
});

// ページング機能
const pagination = () => {
    // 初期値設定
    let page = 1; // 現在のページ（何ページ目か）
    const step = 5; // ステップ数（1ページに表示する項目数）

    // 現在のページ/全ページ を表示
    const count = (page, step) => {
        const p = $('.count').text();
        const total = (menu.length % step == 0) ? (menu.length / step) : (Math.floor(menu.length / step) + 1);
        $('.count').text(page + "/" + total + "ページ");
    }

    // ページを表示
    const show = (page, step) => {
        // 一度テーブルを空にする
        $('.menu_list tbody').empty();
        const first = (page - 1) * step + 1;
        const last = page * step;
        menu.forEach((item, i) => {
            if(i < first - 1 || i > last - 1) return;
            $('.menu_list tbody').append($(`<tr data-id=${item.id}>`)
                .append(
                    `<td>${item.name}</td>`,
                    `<td>${item.price}</td>`
                )
            );
        });
        count(page,step);
    }

    // 最初に1ページ目を表示
    show(page, step);

    // 最前ページ遷移トリガー
    $(document).on('click','#first',function(){
        if(page <= 1) return;
        page = 1;
        show(page, step);
    });

    // 前ページ遷移トリガー
    $(document).on('click','#prev',function(){
        if(page <= 1) return;
        page = page - 1;
        show(page, step);
    });

    // 次ページ遷移トリガー
    $(document).on('click','#next',function(){
        if(page >= menu.length / step) return;
        page = page + 1;
        show(page, step);
    });

    // 最終ページ遷移トリガー
    $(document).on('click','#last',function(){
        if(page >= menu.length / step) return;
        page = Math.ceil(menu.length / step);
        show(page, step);
    });
}

$(window).on('load',function(){
    pagination();
});

JSONファイル

ajaxで読み込んで使用
ページングの動作確認のため、そこそこのデータ数を準備

./json/menu.json
[
    {
        "id": 1,
        "name": "ブレンドコーヒー",
        "price": 320
    },
    {
        "id": 2,
        "name": "アメリカンコーヒー",
        "price": 310
    },
    {
        "id": 3,
        "name": "カフェラテ",
        "price": 410
    },
    {
        "id": 4,
        "name": "カフェモカ",
        "price": 430
    },
    {
        "id": 5,
        "name": "紅茶",
        "price": 320
    },
    {
        "id": 6,
        "name": "かつサンド",
        "price": 500
    },
    {
        "id": 7,
        "name": "ハンバーグサンド",
        "price": 500
    },
    {
        "id": 8,
        "name": "オムレツ",
        "price": 550
    },
    {
        "id": 9,
        "name": "シーザーサラダ",
        "price": 520
    },
    {
        "id": 10,
        "name": "カレーライス",
        "price": 680
    },
    {
        "id": 11,
        "name": "いちごショート",
        "price": 540
    },
    {
        "id": 12,
        "name": "ザッハ・トルテ",
        "price": 570
    },
    {
        "id": 13,
        "name": "チーズケーキ",
        "price": 490
    },
    {
        "id": 14,
        "name": "アップルパイ",
        "price": 590
    },
    {
        "id": 15,
        "name": "カスタードプディング",
        "price": 380
    },
    {
        "id": 16,
        "name": "パフェ",
        "price": 670
    },
    {
        "id": 17,
        "name": "クレープ",
        "price": 480
    },
    {
        "id": 18,
        "name": "おしるこ",
        "price": 320
    },
    {
        "id": 19,
        "name": "みたらし団子",
        "price": 150
    },
    {
        "id": 20,
        "name": "豆大福",
        "price": 120
    },
    {
        "id": 21,
        "name": "あんみつ",
        "price": 280
    }
]

補足事項

うまく表示されない場合は、「ファイル名を指定して実行（Windows + Rキー）」より、「chrome --allow-file-access-from-files」と入力してChromeを開いたうえhtmlファイルを読み込ませること（Windowsの場合）

参考

[WebAssembly]かんたんindex.htmlでSQLite(sql.js, cdnjs)
yamlで作ったIPリストをAWSのSGに適用してみる