🦆
[jQuery]プラグインなしでテーブルのページネーション
概要
プラグインを使用せずにテーブルのページネーションを行うサンプルコード（覚え書き）
大枠は、ほぼ
【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"> << </li>
<li id="prev"> < </li>
<li class="count"></li>
<li id="next"> > </li>
<li id="last"> >> </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の場合）
Discussion