Friday, August 10, 2012

JavaScript - Simple pagination logic


This article will help you to know how you can create a pagination in any webpage. Here I have used it in JavaScript, of course you can use it in any other language as u wish like Java, PHP, ASP etc.

What is Pagination?

Pagination is nothing but the sequence of numbers assigned to a content in webpage. Lets say if you want to show number of contents in a particular web page, its not recommended to show all of them in a single page instead show specific number of contents in one page followed by next set of content in next page and provide navigation to go through each page. In the same way when we do Google search you can see navigation appears at the bottom of the page to go to the next page.


Please see the self explanatory html code below, no need to have any server directly you can run and see the output

<html>
 <head>
  <title> javascript - simple pagination </title>
<SCRIPT LANGUAGE="JavaScript">
<!--
    var keyWords=new Array("abstract","continue","for","new","switch","assert","default","goto","package","synchronized","boolean","do","if","private","this","break","double","implements","protected","throw","byte","else","import","public","throws","case","enum","instanceof","return","transient","catch","extends","int","short","try","char","final","interface","static","void","class","finally","long","strictfp","volatile","const","float","native","super","while");

    function doPagination(start) {

        //alert("inside doPagination() : start >> "+start);
       
        //Change this according to your requirement
        var rows = 9;
        var columns = 1;

       
        var totalContent = keyWords.length;//total number of content
        var noPerPage = rows*columns;//Number of content in one page

        var noOfPage = 0;//Holds number of pages
   
        if(totalContent%noPerPage == 0) {
            noOfPage = Math.floor(totalContent/noPerPage);
        }
        else {
            noOfPage = Math.floor((totalContent/noPerPage)+1);
        }

        //if total content is less than number of content in one page
        if(totalContent < noPerPage) {
            if(totalContent%columns == 0) {
                rows = Math.floor(totalContent/columns);
            }
            else {
                rows = Math.floor((totalContent/columns)+1);
            }
            noOfPage = 1;
        }

        var whichPage = (start/noPerPage)+1;//Current page number

        var pagination = 5;//To show page numbers, better to keep odd number like 3,5,7 etc
        var midPagination = Math.floor(pagination / 2);

        var html = "<table border='1' width='50%'>";
       
    //iterate rows
        for(var i=0;i<rows;i++) {
            if(keyWords[start]) {
                    html += "<tr>";
     //iterate columns
                    for(var j=0;j<columns;j++) {               
                    if(keyWords[start]) {
                        html += "<td>"+keyWords[start]+"</td>";
                    }
                    else {
                        html += "<td> </td>";
                    }
                    start++;
                }
                    html += "</tr>";   
            }
        }

  //to generate pageinition
        html += "<tr>";
        html += "<td colspan='"+columns+"' align='center'>";

        if(whichPage > pagination) {
            html += "<a onclick='doPagination("+noPerPage*(whichPage-1-pagination)+")' style='cursor:pointer'><<</a> ";
        }
        if(whichPage > 1) {
            html += "<a onclick='doPagination("+noPerPage*(whichPage-1-1)+")' style='cursor:pointer'><</a> ";
        }

  //generate page numbers
        var fno = whichPage - midPagination;
        var lno = whichPage + midPagination;

  if(fno < 1 &&  noOfPage > pagination) {
       fno = 1;
       lno = pagination;
  }
  else if(fno < 1 && noOfPage <= pagination) {
      fno = 1;
      lno = noOfPage;
  }
  else if(lno > noOfPage && noOfPage <= pagination) {
   fno = 1;
            lno = noOfPage;       
        }
  else if(lno > noOfPage && noOfPage > pagination) {
      lno = noOfPage;
      fno = (lno - pagination) + 1;
  }
                               
  //loop pages numbers
        for(var k=fno;k<=lno;k++) {
            if(whichPage == k) {
                html += "<b>"+k+"</b> ";
            }
            else {
                html += "<a onclick='doPagination("+noPerPage*(k-1)+")' style='cursor:pointer'>"+k+"</a> ";
            }
        }

        if(whichPage < noOfPage) {
            html += "<a onclick='doPagination("+noPerPage*(whichPage-1+1)+")' style='cursor:pointer'>></a> ";
        }
        if(whichPage <= (noOfPage - pagination)) {
            html += "<a onclick='doPagination("+noPerPage*(whichPage-1+pagination)+")' style='cursor:pointer'>>></a>";
        }
       
        html += "</td>";
        html += "</tr>";

        html += "</table>";
                               
  //Add generated html content
        document.getElementById("content").innerHTML=html;
    }

//-->
</SCRIPT>
 </head>
 <!-- calling doPagination() function on body loading, Zero is passed as loop starts from 0th element of array -->
 <body onload="doPagination(0)">
    <center>
  <!-- This div will content the result -->
        <div id="content"></div>
    </center>
 </body>
</html>


Output :

with 5 rows and 3 columns

with 7 rows and 2 columns