1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Beautifying Webpage With Pagination

Discussion in 'JavaScript and AJAX' started by StellaMorey, Jan 11, 2016.

  1. StellaMorey

    StellaMorey New Member

    Joined:
    Jan 11, 2016
    Messages:
    1
    Likes Received:
    2
    Trophy Points:
    0
    HTML:
    
    
    Pagination could make a page look very clean interms of huge data. It is the process of dividing electronic or web pages into discrete or printed pages. Basically it is used for such things as displaying a limited number of results on search engine results pages to divide returned data and display it on multiple pages.

    *Pagination also includes the logic of preparing and displaying the links to the various pages.

    Implementing Pagination Using Javascript



    Firstly, Declaring a variable and assigning some value (Example 50).

    Code:
    var myPage = 50;
    Every search results the number of output the query has retrieved, so calling out a function to check the condition to limit the number or results that must shown on the page.
    Code:
    function myPagination() {
            if (objJson.length > 50) {
                    document.getElementById("nextPage").style.visibility = "visible"; //if result is greater than 50
            }
    
            if (someVar <= 50) {
                    document.getElementById("prevPage").style.visibility ="hidden";// if result is less than or equal to 50
            } else {
                    document.getElementById("prevPage").style.visibility = "visible";
            }
    }
    Conditioning the result with number of outcomes, if number greaters 50 then visibility is applied and if number lesser or equals 50 then hidden is applied. On each call, we are redirecting the function to either "nextpage" or "prevpage" , which would be calling in the next section.

    For nextPage :

    Code:
    function nextPage() {
            document.getElementById("listingTable").innerHTML = "";
    
            if (someVar < objJson.length) {
                    document.getElementById("nextPage").style.visibility = "visible";
            } else {
                    document.getElementById("nextPage").style.visibility = "hidden";
            }
    
            for (var i = someVar - 50; i < someVar; i++) {
                    document.getElementById("listingTable").innerHTML += objJson[i].adName + "<br>";
            }
    
            someVar += 50;
    
            document.getElementById("prevPage").style.visibility = "visible";
    }
    For prevPage :

    Code:
    function prevPage() {
            document.getElementById("listingTable").innerHTML = "";
    
            if (someVar > 50) {
                    document.getElementById("prevPage").style.visibility = "visible";
            } else {
                    document.getElementById("prevPage").style.visibility = "hidden";
            }
    
            for (var i = someVar - 50; i < someVar; i++) {
                    document.getElementById("listingTable").innerHTML += objJson[i].adName + "<br>";
            }
    
            someVar -= 50;
    
            document.getElementById("nextPage").style.visibility = "visible";
    }
    It must be included in HTML , Adding buttons and calling suitable function on clicking the button.
     
    Evan Cunatt Nsepuka and shabbir like this.

Share This Page