This tutorial provides a step-by-step guide on how to implement next and previous buttons in JavaScript with a demo. These buttons are commonly used for pagination, allowing users to navigate through large sets of data or content in a user-friendly manner. This functionality enhances website usability by providing clear navigation and improving the overall user experience.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'>
Step 1: Including Header Assets
First, include the necessary CSS for Font Awesome in the <head> section of your HTML file. This library provides icons that will be used for the next and previous buttons.
Add the following CDN link inside the <head> tag of your HTML document:
Step 2: HTML Structure
Create the basic HTML structure for the pagination. This includes a <div> container with a <ul> list inside, which will be dynamically populated with page numbers and navigation buttons using JavaScript.
Add the following HTML to your <body>:
<div class="pagination">
<ul> <!--pages or li are comes from javascript --> </ul>
</div>
<script src="./script.js"></script>
Step 3: CSS Styling
Apply the provided CSS styles to customize the appearance of the pagination. This includes styling for the container, list items, active page, and hover states.
Add the following CSS rules to your stylesheet:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
background: #20B2AA;
min-height: 100vh;
padding: 10px;
}
.pagination ul{
width: 100%;
display: flex;
flex-wrap: wrap;
background: #fff;
padding: 8px;
border-radius: 50px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.pagination ul li{
color: #20B2AA;
list-style: none;
line-height: 45px;
text-align: center;
font-size: 18px;
font-weight: 500;
cursor: pointer;
user-select: none;
transition: all 0.3s ease;
}
.pagination ul li.numb{
list-style: none;
height: 45px;
width: 45px;
margin: 0 3px;
line-height: 45px;
border-radius: 50%;
}
.pagination ul li.numb.first{
margin: 0px 3px 0 -5px;
}
.pagination ul li.numb.last{
margin: 0px -5px 0 3px;
}
.pagination ul li.dots{
font-size: 22px;
cursor: default;
}
.pagination ul li.btn{
padding: 0 20px;
border-radius: 50px;
}
.pagination li.active,
.pagination ul li.numb:hover,
.pagination ul li:first-child:hover,
.pagination ul li:last-child:hover{
color: #fff;
background: #20B2AA;
}
Step 4: JavaScript Functionality
Implement the JavaScript code to dynamically generate the pagination links. This involves selecting the <ul> element, defining the total number of pages, and creating a function to generate the HTML for each page number and the next/previous buttons.
Add the following JavaScript to your script.js file:
// selecting required element
const element = document.querySelector(".pagination ul");
let totalPages = 20;
let page = 10;
//calling function with passing parameters and adding inside element which is ul tag
element.innerHTML = createPagination(totalPages, page);
function createPagination(totalPages, page){
let liTag = '';
let active;
let beforePage = page - 1;
let afterPage = page + 1;
if(page > 1){ //show the next button if the page value is greater than 1
liTag += `<li class="btn prev" onclick="createPagination(totalPages, ${page - 1})"><span><i class="fas fa-angle-left"></i> Prev</span></li>`;
}
if(page > 2){ //if page value is less than 2 then add 1 after the previous button
liTag += `<li class="first numb" onclick="createPagination(totalPages, 1)"><span>1</span></li>`;
if(page > 3){ //if page value is greater than 3 then add this (...) after the first li or page
liTag += `<li class="dots"><span>...</span></li>`;
}
}
// how many pages or li show before the current li
if (page == totalPages) {
beforePage = beforePage - 2;
} else if (page == totalPages - 1) {
beforePage = beforePage - 1;
}
// how many pages or li show after the current li
if (page == 1) {
afterPage = afterPage + 2;
} else if (page == 2) {
afterPage = afterPage + 1;
}
for (var plength = beforePage; plength <= afterPage; plength++) {
if (plength > totalPages) { //if plength is greater than totalPage length then continue
continue;
}
if (plength == 0) { //if plength is 0 than add +1 in plength value
plength = plength + 1;
}
if(page == plength){ //if page is equal to plength than assign active string in the active variable
active = "active";
}else{ //else leave empty to the active variable
active = "";
}
liTag += `<li class="numb ${active}" onclick="createPagination(totalPages, ${plength})"><span>${plength}</span></li>`;
}
if(page < totalPages - 1){ //if page value is less than totalPage value by -1 then show the last li or page
if(page < totalPages - 2){ //if page value is less than totalPage value by -2 then add this (...) before the last li or page
liTag += `<li class="dots"><span>...</span></li>`;
}
liTag += `<li class="last numb" onclick="createPagination(totalPages, ${totalPages})"><span>${totalPages}</span></li>`;
}
if (page < totalPages) { //show the next button if the page value is less than totalPage(20)
liTag += `<li class="btn next" onclick="createPagination(totalPages, ${page + 1})"><span>Next <i class="fas fa-angle-right"></i></span></li>`;
}
element.innerHTML = liTag; //add li tag inside ul tag
return liTag; //reurn the li tag
}
In conclusion, by following these steps, you can successfully create next and previous buttons in JavaScript with a dynamic demo, which significantly improves the navigation experience of your website or application.
