[JavaScript] ページャー(ページ送り)機能実装

2023年12月5日 15:08

簡単なページャー（ページ送り）機能を作ってと言われたので、
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>

この記事が気に入ったらサポートをしてみませんか？