This code implements a pagination system with the next and previous buttons using JavaScript. It creates a dynamic set of numbered pages to navigate through content efficiently. The core function, createPagination, constructs the pagination elements and allows users to move between pages, making it helpful for organizing and presenting large datasets.
You can use this code in your website to enhance the user experience by allowing them to easily navigate through lengthy content, such as articles or product listings.
How to Create Next And Previous Buttons In JavaScript
1. First, ensure that you include the Font Awesome CSS file in the <head> section of your HTML file.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'>
2. In your HTML file, create a container where you want to display the pagination. Here’s an example:
<div class="pagination"> <ul> <!--pages or li are comes from javascript --> </ul> </div>
3. To style the pagination elements, you can customize the following CSS code. It defines the appearance of the pagination, including buttons and the overall look.
@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;
}
4. The core functionality of this code lies in the JavaScript part. Here’s how you can use it:
- Select an HTML element where you want to place the pagination.
- Define the total number of pages and the current page.
- Call the
createPagination(totalPages, page)function, which generates the pagination and updates it when the user interacts with next and previous buttons or page numbers.
// 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
}
You can customize the pagination to fit your specific requirements. The JavaScript code handles the logic, allowing you to change the number of pages, the starting page, and the styling.
That’s all! hopefully, you have successfully created the Next And Previous Buttons in JavaScript. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
- Creating Keyboard Shortcuts in JavaScript
- Round Range Slider in JavaScript
- JavaScript Button Ripple Effect Onclick
- JavaScript Get Client System Information
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.