JavaScript

Custom Pagination in JavaScript(beginners)

Admin
Admin
5 Min Read
custom pagination in javascript thumb

In this article, we will learn how to make Custom Pagination using Javascript. To make this first of all we need basic knowledge of HTML & CSS and Javascript. So in javascript, we need to familiar with function and DOM elements. So we can easily create custom pagination.

Contents
Custom Pagination in Javascript📂 index.html📂 style.css📂 index.jsDisplay Itemscreate Pagination ButtonSet The Pagination
custom pagination in javascript

Custom Pagination in Javascript

👉 So let’s start. First, we have to make the design using HTML & CSS. In this Project our main focus on javascript. Here the HTML code.

📂 index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Users</title>

    <link rel="stylesheet" href="style.css" />
</head>
<body>
    
    <main>
        <div class="list" id="list"></div>
        <div class="pagenumbers" id="pagination"></div>
    </main>
    <script src="index.js"></script>
</body>
</html>
📂 style.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    background: #F3F3F3;
}



main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

main .list {
    width: 100%;
    max-width: 768px;
    background-color: #FFF;
    border: 1px solid #CCC;
    margin-top: 25px;
}

main .list .item {
    padding: 15px;
    border-bottom: 1px solid #CCC;
}
main .list .item:last-of-type {
    border-bottom: none;
}
main .list .item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.pagenumbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.pagenumbers button {
    width: 50px;
    height: 50px;

    appearance: none;
    border: none;
    outline: none;
    cursor: pointer;

    background-color: #44AAEE;

    margin: 5px;
    transition: 0.4s;

    color: #FFF;
    font-size: 18px;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
}

.pagenumbers button:hover {
    background-color: #44EEAA;
}

.pagenumbers button.active {
    background-color: #44EEAA;
    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2);
}

👉 Now we come to the javascript portion. First, we declare the array of items.

custom pagination in javascript -arrays
📂 index.js
const listItems = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
    'Item 6',
    'Item 7',
    'Item 8',
    'Item 9',
    'Item 10',
    'Item 11',
    'Item 12',
    'Item 13',
    'Item 14',
    'Item 15',
    'Item 16',
    'Item 17',
    'Item 18',
    'Item 19',
    'Item 20',
    'Item 21',
    'Item 22'
];

👉Now we get the List and Pagination in our JavaScript code.

custom pagination javscript fetch the items and page
let list_elemnts = document.querySelector('#list');
let pagination_elemnts = document.querySelector('#pagination');

👉 Now we defined current page and row. A row means how many to show rows in our page.

rocoderes-custom pagination in javsacript -rows
let current_page = 1;
let row = 5;

Display Items

👉 Now we will see how we can display the items. Now we create the Function DisplaysItems. In DisplaysItems we will pass 4 parameters which is current_page, row, items and wrapper. First We have to display the array Items. Here we have to show only 5 items in every page. That’s why we have taken two variables here, start and end. Where the start value will be 0 and end value will be 5.

👉 Now we will store the value of 0 to 5 of the items in another array using slice method. Now we have an array PaginationItems which have total 5 values. Now we will use map method on PaginationItems to display all the items one by one. Here you can also use for loop.

custom pagination in javascript- display items
custom pagination in javascript- display items
function DisplaysItems(current_page, row, items, wrapper) {
    wrapper.innerHTML = '';
    current_page--;


    let start = current_page * row;
    let end = start + row;
    
    let PaginationItems = items.slice(start, end);

    PaginationItems.map((item) => {
        let items_elemnts = document.createElement('div');
        items_elemnts.classList.add('item');
        items_elemnts.innerText = item;
        wrapper.appendChild(items_elemnts);
    });
}

create Pagination Button

👉Let’s create pagination button. Here we create a function which is PaginationButton. In PaginationButton we will pass 2 parameters which is items and page. In this function we create a button element and assign the page variable in text. Here we will give a condition If the value of current_page end page is value is equal then we add a class on button. Now we will use click event on button.In click event we call DisplaysItems function.

function PaginationButton(items, page) {
     let button = document.createElement('button');
     button.innerText = page;
     if (current_page === page) {
         button.classList.add('active');
     }
     button.addEventListener('click', function() {
         current_page = page;
         DisplaysItems(current_page, row, items, list_elemnts);
         let current_btn = document.querySelector('.pagenumbers button.active');
         current_btn.classList.remove('active');
         button.classList.add('active');
     });
     return button;
 }

Set The Pagination

👉 Now we create setUpPagination function. In this function we will pass 3 parameters which is items, row and pagination_elemnts. Now we create a variable which is pageCount. The value of pageCount is items.length/rows. After we will create a for loop. inside loop we call the PaginationButton function.

function setUpPagination(items, row, pagination_elemnts) {
     pagination_elemnts.innerHTML = '';
     let PageCount = Math.ceil(items.length / row);
     for (let i = 1; i < PageCount + 1; i++) {
         let btn = PaginationButton(items, i);
         pagination_elemnts.appendChild(btn);
     }
 }

full source code: Custom Pagination in javascript

👉 If you want to clear the basic concepts of JavaScript you must read this:
➜ 15 JavaScript Basic Concepts You Should Know

Share this Article
Posted by Admin
Follow:
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article Split method in python Python String split() Method
Next Article 15 JavaScript Basic Concepts You Should Know 15 JavaScript Basic Concepts You Should Know
22 Comments
- Advertisement -
Lost your password?