[JavaScript] ページャー(ページ送り)機能実装
簡単なページャー（ページ送り）機能を作ってと言われたので、
JavaScriptだけでjQueryを使用せずに作ってみた。
<html lang="ja">
<head>
<title>test</title>
<style>
<!--
.pagination {
display: flex;
list-style: none;
padding: 0;
}
.pagination li {
margin: 0 5px;
}
.pagination a {
display: block;
padding: 5px 10px;
border: 1px solid #ccc;
color: #333;
text-decoration: none;
}
.pagination .active a {
background-color: #333;
color: #fff;
}
-->
</style>
<script>
function createPager(container, currentPage, totalPages, onPageClick) {
var pager = document.createElement('ul');
pager.classList.add('pagination');
// 「前へ」リンクの作成
var previousLink = document.createElement('a');
previousLink.href = '#';
previousLink.innerHTML = '前へ';
previousLink.addEventListener('click', function (e) {
e.preventDefault();
if (currentPage > 1) {
currentPage--;
onPageClick(currentPage);
updatePager();
}
});
// 「次へ」リンクの作成
var nextLink = document.createElement('a');
nextLink.href = '#';
nextLink.innerHTML = '次へ';
nextLink.addEventListener('click', function (e) {
e.preventDefault();
if (currentPage < totalPages) {
currentPage++;
onPageClick(currentPage);
updatePager();
}
});
// ページリンクの作成
function createPageLink(pageNumber) {
var pageLink = document.createElement('a');
pageLink.href = '#';
pageLink.innerHTML = pageNumber;
pageLink.addEventListener('click', function (e) {
e.preventDefault();
currentPage = pageNumber;
onPageClick(currentPage);
updatePager();
});
return pageLink;
}
// ページャーを更新する関数
function updatePager() {
pager.innerHTML = '';
// 「最初のページへ」リンクを追加
var firstPageItem = document.createElement('li');
firstPageItem.classList.add('page-item');
var firstPageLink = createPageLink(1);
firstPageLink.innerHTML = '<<';
firstPageItem.appendChild(firstPageLink);
pager.appendChild(firstPageItem);
// 「前へ」リンクを追加
var previousPageItem = document.createElement('li');
previousPageItem.classList.add('page-item');
previousPageItem.appendChild(previousLink);
pager.appendChild(previousPageItem);
// 現在のページの前後にページリンクを3つずつ表示する
var startPage = Math.max(1, currentPage - 3);
var endPage = Math.min(totalPages, currentPage + 3);
for (var i = startPage; i <= endPage; i++) {
var pageItem = document.createElement('li');
pageItem.classList.add('page-item');
if (i === currentPage) {
pageItem.classList.add('active');
}
var pageLink = createPageLink(i);
pageItem.appendChild(pageLink);
pager.appendChild(pageItem);
}
// 「次へ」リンクを追加
var nextPageItem = document.createElement('li');
nextPageItem.classList.add('page-item');
nextPageItem.appendChild(nextLink);
pager.appendChild(nextPageItem);
// 「最後のページへ」リンクを追加
var lastPageItem = document.createElement('li');
lastPageItem.classList.add('page-item');
var lastPageLink = createPageLink(totalPages);
lastPageLink.innerHTML = '>>';
lastPageItem.appendChild(lastPageLink);
pager.appendChild(lastPageItem);
}
// 初回のページャーの生成
updatePager();
// コンテナにページャーを追加
container.appendChild(pager);
}
</script>
</head>
<body>
<div>a</div>
<div>b</div>
<div>c</div>
<div id="pager"></div>
<script>
var pagerContainer = document.getElementById('pager');
createPager(pagerContainer, 1, 100, function (pageNumber) {
// ページ番号がクリックされたときの処理
alert(pageNumber);
});
</script>
</body>
</html>