Pagination

by majeedblog

HTML

<div id="bookList"></div>
<a href="javascript:prevPage()" id="prev_button">Prev</a>
<a href="javascript:nextPage()" id="next_button">Next</a>
page: <span id="pageNum"></span>

JavaScript

var currentPage = 1;
var pageSize = 2;

var Books  = [
    { bookName : "book1"},
    { bookName : "book2"},
    { bookName : "book3"},
    { bookName : "book4"},
    { bookName : "book5"},
    { bookName : "book6"},
    { bookName : "book7"},
    { bookName : "book8"},
    { bookName : "book9"},
    { bookName : "book10"},    
];


const numPages = ()=> Math.ceil(Books.length / pageSize);

const nextPage= ()=> {
    if (currentPage < numPages()) {
        currentPage++;
        changePage(currentPage);
    }
}


const prevPage = ()=> {
    if (currentPage > 1) {
        currentPage--;
        changePage(currentPage);
    }
}


const changePage =(page) => {
    var next_button = document.getElementById("next_button");
    var prev_button = document.getElementById("prev_button");
    var bookList = document.getElementById("bookList");
    var pageNumber = document.getElementById("pageNum");
 
    // Validate page
    if (page < 1) page = 1;
    if (page > numPages()) page = numPages();

    bookList.innerHTML = "";
    
    let startPage = (page-1) * pageSize;
    let endPage = (page * pageSize);
    for (let i = startPage; i < endPage && i < Books.length; i++) {
        bookList.innerHTML += Books[i].bookName + "<br>";
    }
    pageNumber.innerHTML = page + "/" + numPages();

    if (page == 1) {
        prev_button.style.visibility = "hidden";
    } else {
        prev_button.style.visibility = "visible";
    }

    if (page == numPages()) {
        next_button.style.visibility = "hidden";
    } else {
        next_button.style.visibility = "visible";
    }
}



window.onload = () => changePage(1);