JavaScriptES6 Pagination

I have created pagination with pure JavaScript data is coming from array of objects which are static but we can use data from server or api. Currently 10 object per page is showing we can change it according our requirement.You can see in console starting point and the end point of showing data on pages.
Demo


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://getbootstrap.com/docs/4.4/dist/css/bootstrap.min.css" rel="stylesheet">

    <title>Javascript Pagination</title>
</head>

<body>
    <div class="container-fluid">
        <ul id="paginationTable" class="list-group">
        </ul>
        <ul id="pagination" class=" pagination justify-content-center">
        </ul>
        <div id="loader" class="d-flex justify-content-center d-block">
            <div class="spinner-border" role="status">
                Loading...
            </div>
        </div>
    </div>
    <script>

       
//Loader function
        const addLoader = () => {
            document.getElementById("loader").remove("d-none");
        }
//Remove Loader function
        const removeLoader = () => {
            document.getElementById("loader").remove("d-block");
        }
//Define variables
        let paginatinTable = document.getElementById("paginationTable");
        let perPage = 10;
        let currentNum = 1;
        let end = currentNum * perPage;
        let start = end - perPage; 
        let currentPost = [];
//Remove rows
       const removeRow = ()=>{
        paginatinTable.innerHTML = "";
       }
//Get the clicked number
        getCurrentNumber = (num)=>{
            end = num * perPage;
            start = end - perPage; 
            removeRow();
            loadData();
        }
//Generate paginatin number
        const createNumber = (num) => {
            let wrapper = document.getElementById("pagination")
            let myHTML = '';
            for (var i = 1; i <= num; i++) {
 myHTML += `<li class="page-item" >${i}</li>`;
            }
            wrapper.innerHTML = myHTML;
        }
//Crated the number of row that we have passed in perPage variable
        const createRow = (element) => {
            let node = document.createElement("li");
            node.classList.add("list-group-item");
            let id = document.createElement("b");
            id.innerHTML = element.id;
            let textnode = document.createTextNode(element.title);
            node.appendChild(id);
            node.appendChild(textnode);
            paginatinTable.appendChild(node);
        }
        let currentPage = (e) => {
            currentPageNum = e;
        };
//Fetch data from server           
        const fetchPost = async () => {
             try {
                let response = await fetch('https://jsonplaceholder.typicode.com/posts');
                let data = await response.json();
                let numberOfPages = Math.round(data.length / perPage);
                 await data.forEach(element => {
                currentPost.push(element)
   
            });
           await loadData();
            createNumber(numberOfPages);
            removeLoader()
            } catch (error) {
                console.log(error);
            }
        }
     fetchPost();
//Load array of objects store in result variable array
         const loadData=()=>{
           let result =  currentPost.slice(start,end);
            result.forEach(element => {
                createRow(element)
            });
        }
        

    </script>
</body>


</html>

Leave a Reply

Your email address will not be published. Required fields are marked *