lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
159 lines (132 loc) • 7.07 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Pagination</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@3.0.0/src/lightswind.css">
</head>
<body class="bg-gray-100">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl ">
<div class="relative text-center flex items-center justify-center flex-wrap gap-4">
<!-- Pagination Container -->
<div class="flex justify-center items-center font-primarylw">
<nav aria-label="Page navigation" class="inline-flex items-center space-x-2">
<!-- Double Left Button (<<) -->
<button id="doublePrevButton"
class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-primarylw-2 hover:text-white focus:outline-none focus:ring-2 focus:ring-primarylw-2 focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed"
disabled>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" />
</svg>
</button>
<!-- Previous Button (<) -->
<button id="prevButton"
class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-l-lg hover:bg-primarylw-2 hover:text-white focus:outline-none focus:ring-2 focus:ring-primarylw-2 focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed"
disabled>
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
</path>
</svg>
</button>
<!-- Pagination Buttons -->
<ul id="paginationContainer" class="inline-flex items-center space-x-2">
<!-- Pagination items will be dynamically generated here -->
</ul>
<!-- Next Button (>) -->
<button id="nextButton"
class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-r-lg hover:bg-primarylw-2 hover:text-white focus:outline-none focus:ring-2 focus:ring-primarylw-2 focus:ring-opacity-50">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
</path>
</svg>
</button>
<!-- Double Right Button (>>) -->
<button id="doubleNextButton"
class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-primarylw-2 hover:text-white focus:outline-none focus:ring-2 focus:ring-primarylw-2 focus:ring-opacity-50">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
</svg>
</button>
</nav>
</div>
</div>
</div>
<script>
const totalPages = 20;
let currentPage = 1;
let startIndex = 1;
let itemsPerPage = window.innerWidth <= 768 ? 3 : 5;
const paginationContainer = document.getElementById('paginationContainer');
const prevButton = document.getElementById('prevButton');
const nextButton = document.getElementById('nextButton');
const doublePrevButton = document.getElementById('doublePrevButton');
const doubleNextButton = document.getElementById('doubleNextButton');
function renderPagination() {
paginationContainer.innerHTML = '';
for (let i = startIndex; i < startIndex + itemsPerPage && i <= totalPages; i++) {
const pageButton = document.createElement('button');
pageButton.innerText = i;
pageButton.classList.add('px-4', 'py-2', 'text-sm', 'font-medium', 'border', 'rounded-lg', 'transition', 'transform', 'duration-200');
if (i === currentPage) {
pageButton.classList.add('bg-primarylw', 'text-white', 'border-primarylw', 'scale-110', 'shadow-lg');
} else {
pageButton.classList.add('bg-white', 'text-gray-700', 'border-gray-300', 'hover:bg-primarylw-2', 'hover:text-white');
}
pageButton.addEventListener('click', () => {
currentPage = i;
updatePagination();
});
paginationContainer.appendChild(pageButton);
}
}
function updatePagination() {
if (currentPage < startIndex) {
startIndex = currentPage;
} else if (currentPage >= startIndex + itemsPerPage) {
startIndex = currentPage - itemsPerPage + 1;
}
renderPagination();
prevButton.disabled = currentPage === 1;
nextButton.disabled = currentPage === totalPages;
doublePrevButton.disabled = startIndex === 1;
doubleNextButton.disabled = startIndex + itemsPerPage > totalPages;
}
prevButton.addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
updatePagination();
}
});
nextButton.addEventListener('click', () => {
if (currentPage < totalPages) {
currentPage++;
updatePagination();
}
});
doublePrevButton.addEventListener('click', () => {
startIndex = Math.max(1, startIndex - itemsPerPage);
currentPage = startIndex;
updatePagination();
});
doubleNextButton.addEventListener('click', () => {
startIndex = Math.min(totalPages - itemsPerPage + 1, startIndex + itemsPerPage);
currentPage = startIndex;
updatePagination();
});
window.addEventListener('resize', () => {
const isMobileView = window.innerWidth <= 768;
itemsPerPage = isMobileView ? 3 : 5;
updatePagination();
});
updatePagination();
</script>
</body>
</html>