JQueryなどライブラリを使わず、素のJSでリストのページネーションを実装してみました。
動作イメージ
「＜」や「＞」をクリックすると、ページ数とリストが切り替わります。
（「1」「2」などの数字部分は、書いてありますが今回は特に機能入ってないです...）
1ページ目
2ページ目
プログラム
ディレクトリ構成
/pagination_1
|-- index.html
|-- index.js
|-- style.css
HTML
<!DOCTYPE html>
<head>
<title>JS Pagination</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Cafe Menu</h2>
<p class="count"></p>
<ul class="menu_list"></ul>
<ul class="pagination">
<li id="prev"><</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li id="next">></li>
</ul>
<script tyle="text/javascript" src="index.js" charset="UTF-8"></script>
</body>
JavaScript
// リスト表示用（今回name_jpしか使ってません...）
const menu = [
{"id": 1, "name_jp": "コーヒー", "name_en": "coffee"},
{"id": 2, "name_jp": "エスプレッソ", "name_en": "espresso"},
{"id": 3, "name_jp": "カプチーノ", "name_en": "cappuccino"},
{"id": 4, "name_jp": "カフェモカ", "name_en": "mocha"},
{"id": 5, "name_jp": "ティー", "name_en": "tea"},
{"id": 6, "name_jp": "サンドイッチ", "name_en": "sandwich"},
{"id": 7, "name_jp": "ホットドック", "name_en": "hotdog"},
{"id": 8, "name_jp": "オムレツ", "name_en": "omelette"},
{"id": 9, "name_jp": "サラダ", "name_en": "salad"},
{"id": 10, "name_jp": "カレー", "name_en": "curry"},
{"id": 11, "name_jp": "ショートケーキ", "name_en": "shortcake"},
{"id": 12, "name_jp": "チョコレートケーキ", "name_en": "chocolatecake"},
{"id": 13, "name_jp": "チーズケーキ", "name_en": "cheesecake"},
{"id": 14, "name_jp": "アップルパイ", "name_en": "applepie"},
{"id": 15, "name_jp": "プリン", "name_en": "pudding"},
{"id": 16, "name_jp": "パフェ", "name_en": "pudding"}
]
// ページング機能
const pagination = () => {
// 初期値設定
let page = 1; // 現在のページ（何ページ目か）
const step = 5; // ステップ数（1ページに表示する項目数）
// 現在のページ/全ページ を表示
// <p class="count"></p> の中身を書き換え
const count = (page, step) => {
const p = document.querySelector('.count');
// 全ページ数 menuリストの総数/ステップ数の余りの有無で場合分け
const total = (menu.length % step == 0) ? (menu.length / step) : (Math.floor(menu.length / step) + 1);
p.innerText = page + "/" + total + "ページ";
}
// ページを表示
// <ul class="menu_list"></ul> の中身を書き換え
const show = (page, step) => {
const ul = document.querySelector('.menu_list');
// 一度リストを空にする
while (ul.lastChild) {
ul.removeChild(ul.lastChild);
}
const first = (page - 1) * step + 1;
const last = page * step;
menu.forEach((item, i) => {
if(i < first - 1 || i > last - 1) return;
let li = document.createElement('li');
li.innerText = item.name_jp;
ul.appendChild(li);
});
count(page,step);
}
// 最初に1ページ目を表示
show(page, step);
// 前ページ遷移トリガー
document.getElementById('prev').addEventListener('click', () => {
if(page <= 1) return;
page = page - 1;
show(page, step);
});
// 次ページ遷移トリガー
document.getElementById('next').addEventListener('click', () => {
if(page >= menu.length / step) return;
page = page + 1;
show(page, step);
});
}
window.onload = () => {
pagination();
}
CSS
気持ち調整したくらいです...
.menu_list {
height: 150px;
}
.pagination {
list-style: none;
}
.pagination li {
display: inline-block;
margin: 0 0.5em;
cursor: pointer;
}
おわりに
GitHubにも同じプログラムをPushしました。
https://github.com/SunHigh105/js_pagination/tree/master/pagination_1