In this article we going to learn Dynamic pagination in JavaScript. That can help you improve the user experience of your website. you can keep your website loading quickly and efficiently, while also providing users with a way to easily browse through large amounts of data (if you have backend, this is just the frontend of pagination).
I have already shared simple pagination using html & CSS and dynamic pagination using PHP. In this blog post we going to make simple dynamic pagination using JavaScript.
Video Tutorial on Dynamic Pagination Using JavaScript.
This pagination has two buttons (previous and next button) and the number of pages is 10 (the number of pages can be change). The pages are dynamic. It shows 5-page number at time.
Dynamic Pagination Using JavaScript.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
I’ve integrated JavaScript within the html file inside the script tag. You can create a separate file for JavaScript and link it to an html file.
Now let's create a dynamic pagination using JavaScript step by step.
Step 1: Create basic structure html.
Create basic structure of html and set up the file structure.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
<script>
</script>
</html>
CSS
*{
padding: 0px;
margin: 0px;
}
body{
width: 100%;
height: 100vh;
background: #943ec0;
display: flex;
align-items: center;
justify-content: center;
}
Output:
Step 2: Create a basic pagination.
First, we going to create a basic pagination with only HTML and CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<button type="button" class="prev"><a href="#">Prev</a></button>
<ul class="ul">
<li><a href="#" class="page_number">1</a></li>
<li><a href="#" class="page_number">2</a></li>
<li><a href="#" class="page_number active_page">3</a></li>
<li><a href="#" class="page_number">4</a></li>
<li><a href="#" class="page_number">5</a></li>
</ul>
<button type="button" class="next"><a href="#">Next</a></button>
</div>
</body>
</html>
CSS
*{
padding: 0px;
margin: 0px;
}
body{
width: 100%;
height: 100vh;
background: #943ec0;
display: flex;
align-items: center;
justify-content: center;
}
.box{
background-color: #fff;
padding: 10px;
border-radius: 100px;
box-shadow: 0px 10px 30px -15px #000;
display: flex;
align-items: center;
}
.box ul{
display: flex;
margin: 0px 10px;
}
.box ul li{
list-style: none;
margin: 0px 5px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 100px;
text-align: center;
}
.box ul li a{
font-size: 25px;
text-decoration: none;
color: #000;
display: block;
border-radius: 100px;
transition: 0.2s;
}
.box ul li .active_page{
background-color: #a05acb;
color: #fff;
}
.box ul li a:hover,
.box button a:hover{
background-color: #a05acb;
color: #fff;
}
/* ---------- Buttons ---------- */
.box button{
font-size: 20px;
font-weight: bold;
background-color: #f1f1f1;
border: none;
cursor: pointer;
border-radius: 100px;
overflow: hidden;
}
.box button a{
text-decoration: none;
padding: 10px 20px;
display: block;
color: #000;
transition: 0.2s;
}
Output:
Here's the basic or simple pagination is ready.
But we have to make it dynamic like the page numbers should be form dynamically according to current page number (Page on which user is currently on).
We have to create a click and selection functionaltity on page numbers. When user clicks on any page numbers its should be selected and the further page number should be form dynamically using JavaScript.
Step 3: Add javascript for dynamic functionality to pagination.
Now we going to make pagination dynamically means add functionality to next and previous button and form pages according to current page number (Page on which user is currently on).
So, what's our pagination looks like:
It has two button next and previous. Page numbers are create according to current page number of user. Means if user is on 5th page number then pagination show 2 pages before and two pages after current page number. Means pagination show 3,4,5,6,7 pages. If user is on 7th page number then pagination shows 5,6,7,8,9 pages.
Let's make pagination through javascript.
First define all variable.
And also comment out or remove the pagination that we create through html. Because we going to create it through JavaScript, dynamically.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<button type="button" class="prev"><a href="#">Prev</a></button>
<ul class="ul">
<!-- <li><a href="#" class="page_number">1</a></li>
<li><a href="#" class="page_number">2</a></li>
<li><a href="#" class="page_number active_page">3</a></li>
<li><a href="#" class="page_number">4</a></li>
<li><a href="#" class="page_number">5</a></li> -->
</ul>
<button type="button" class="next"><a href="#">Next</a></button>
</div>
</body>
<script>
</script>
</html>
Output:
Defining the variables.
JavaScript
let ul = document.querySelector(".ul");
let prev = document.querySelector(".prev");
let next = document.querySelector(".next");
let current_page = 5;
let total_page = 10;
let active_page = "";
Now call and create a function, that also run onclick on individual page number and buttons (next and previous).
JavaScript
let ul = document.querySelector(".ul");
let prev = document.querySelector(".prev");
let next = document.querySelector(".next");
let current_page = 5;
let total_page = 10;
let active_page = "";
create_pages(current_page);
function create_pages(current_page) {
// further code will be starts from here.
}
I have also given one parameter to this function that is current page variable (current_page). Because thats going to change on every click.
For example, if user click on any page number like say 3rd page number, then we change the current page (current_page variable) value to 3 and function run and it will create two pages before and after 3rd page and pagination looks like 1,2,3,4,5.
Now when this function run. First of all, we going to remove all html inside ul tag which is li tags (the page numbers).
JavaScript
function create_pages(current_page) {
ul.innerHTML = "";
}
Creating page number with javascript.
Now we going to create page numbers through for loop. So, I want to show 5 page numbers. As we set current page variable value to 5, we going to create two pages before and after that current page so overall the pages created it 5 (3,4,5,6,7).
And also add onclick event to all page numbers to add functionality to change page number or to change current page.
JavaScript
function create_pages(current_page) {
ul.innerHTML = "";
let before_page = current_page - 2;
let after_page = current_page + 2;
for (let i = before_page; i <= after_page; i++) {
ul.innerHTML += `<li onclick="create_pages(` + i + `)"><a href="#" class="page_number">` + i + `</a></li>`;
}
}
Output:
As you can see image above. The page numbers is created. Now let's design the active page number. So that user can know on which page number it is currently on.
Getting active page number from pagination.
Now we also have to show user that on which page number its currently on. See the below condition for that functionality. I have just added CSS class(active_page) which I have created in CSS file to show active page, after checking current page value is equal to for loop's i variable value or not.
JavaScript
function create_pages(current_page) {
ul.innerHTML = "";
let before_page = current_page - 2;
let after_page = current_page + 2;
for (let i = before_page; i <= after_page; i++) {
if (current_page == i) {
active_page = "active_page";
} else {
active_page = "";
}
ul.innerHTML += `<li onclick="create_pages(` + i + `)"><a href="#" class="page_number ` + active_page + `">` + i + `</a></li>`;
}
}
Output:
As you can see in above image the 5th number page is highlighted. Because right now current page value is 5 (current_page variable value) which is dynamic as we pass it in function parameter.
Now here's one problem when user is on 1st, 2nd, last and last second page number. The pagination looks like this.
It create extra page numbers, before and after current page number, as we said to do, in for loop. Its create extra pages like 0 and -1. And at last also, it create extra pages more than total page value(total_page variable value which is 10).
So, for that we need to add some conditions to fix that.
JavaScript
function create_pages(current_page) {
ul.innerHTML = "";
let before_page = current_page - 2;
let after_page = current_page + 2;
if(current_page == 2){
before_page = current_page - 1;
}
if(current_page == 1){
before_page = current_page;
}
if(current_page == total_page - 1){
after_page = current_page + 1;
}
if(current_page == total_page){
after_page = current_page;
}
for (let i = before_page; i <= after_page; i++) {
if (current_page == i) {
active_page = "active_page";
} else {
active_page = "";
}
ul.innerHTML += `<li onclick="create_pages(` + i + `)"><a href="#" class="page_number ` + active_page + `">` + i + `</a></li>`;
}
}
Funtionality for buttons in pagination.
Now the pagination is almost ready. Now we just need to add functionality to buttons (Previous and next button) to change page number accordingly.
And also, to disappears, means when current page is less than or equal to 1 than disappear the previous button and when current page is greater than or equal to last page or total page value (total_page variable) than disappear the next button.
JavaScript
function create_pages(current_page) {
ul.innerHTML = "";
let before_page = current_page - 2;
let after_page = current_page + 2;
if(current_page == 2){
before_page = current_page - 1;
}
if(current_page == 1){
before_page = current_page;
}
if(current_page == total_page - 1){
after_page = current_page + 1;
}
if(current_page == total_page){
after_page = current_page;
}
for (let i = before_page; i <= after_page; i++) {
if (current_page == i) {
active_page = "active_page";
} else {
active_page = "";
}
ul.innerHTML += `<li onclick="create_pages(` + i + `)"><a href="#" class="page_number ` + active_page + `">` + i + `</a></li>`;
}
// Next and Previous Button Functionality.
prev.onclick = function () {
current_page--;
create_pages(current_page);
}
if(current_page <= 1){
prev.style.display = "none";
}else{
prev.style.display = "block";
}
next.onclick = function () {
current_page++;
create_pages(current_page);
}
if(current_page >= total_page){
next.style.display = "none";
}else{
next.style.display = "block";
}
}
So that it simple dynamic pagination is ready. You can see demo in above YouTube video.
You may like:
- How to create a simple pagination design using HTML and CSS.
- How to create a pagination in PHP & MySQL.
Final code:
So that’s its pagination using JavaScript is ready. If you have any query or suggestions you can write in the comment section.
yes
ReplyDeleteAny query or suggestion
Delete