Home Javascript Custom Pagination in JavaScript(beginners)

Custom Pagination in JavaScript(beginners)

22
315
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.

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

22 COMMENTS

  1. I read your post. It is very informative and helpful to me. I admire the message valuable information you provided in your article.
    power bi certification

  2. I want to give you suggestion, that you should add two buttons for previous and next blog . It will help users to find your other awesome blogs..

  3. Hello there, You’ve done a fantastic job. I will certainly digg it and personally recommend to
    my friends. I am sure they’ll be benefited from this web site.

  4. magnificent publish, very informative. I’m wondering why
    the opposite specialists of this sector don’t
    understand this. You should proceed your writing.
    I am sure, you have a great readers’ base already!

  5. I think this is among the most vital info for me.
    And i’m glad reading your article. But want to remark on some general things, The website style is wonderful, the articles is really nice : D.
    Good job, cheers

  6. Great weblog right here! Also your site lots up fast!
    What web host are you the use of? Can I am getting your associate hyperlink on your host?
    I desire my web site loaded up as fast as yours lol

  7. Interesting blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple adjustements would really make my blog stand out. Please let me know where you got your design. Thanks

  8. I¦ve been exploring for a little bit for any high-quality articles or weblog posts in this sort of space . Exploring in Yahoo I eventually stumbled upon this site. Reading this info So i am satisfied to express that I’ve an incredibly excellent uncanny feeling I discovered just what I needed. I so much unquestionably will make sure to do not overlook this site and provides it a look on a constant basis.

LEAVE A REPLY

Please enter your comment!
Please enter your name here