Pagination code to Limit the Page number by using javascript

   HI ,

     This example explains how to write an application using HTML  and JAVASCRIPT  which uses pagination to display the results with Limited  indexing.


 what is pagination?

         Fetching millions of records from database consumes almost all CPU power and memory of machine.

         Hence we break millions of records into small chunks showing limited number of records (say 20 or 30) per page. The best example of this is Google search pagination which allows user to navigate to next page by page number and explore limited records per pages.

Source code of  the Pagination to fix the number of records...

Save this file with anyname.html

 <table>
        <tr>
          <td><label id="lDisplayPerPg" for="lDisplayPerPg">Reports per page</label>
            <select name="listDisplayPerPg" id="listDisplayPerPg">
              <option value="2" selected="selected">2</option>
              <option value="4">4</option>
              <option value="6">6</option>
              <option value="8">8</option>
            </select></td>
        </tr>
      </table>


          <form method="post" action="">
            <table id="tadminViewReport" border="0" width="960px" cellpadding="0" cellspacing="0">
              <tr>
                <th width="15%">Username</th>
                <th width="15%">Report ID</th>
                <th width="40%">Report Title</th>
                <th width="20%">Date submitted</th>
                <th width="10%">Status</th>
              </tr>

              <tr>
                <td>username1</td>
                <td>reportID1</td>
                <td class="reportDoc">Document 1</td>
                <td>Date 1</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

              <tr>
                <td>username2</td>
                <td>reportID2</td>
                <td class="reportDoc">Document 2</td>
                <td>Date 2</td>
                <td><a href="admin_report_details.html">In Queue</a></td>
              </tr>
              <tr>

                <td>username3</td>
                <td>reportID3</td>
                <td class="reportDoc">Document 3</td>
                <td>Date 3</td>
                <td><a href="admin_report_details.html">Completed</a></td>
              </tr>

              <tr>
                <td>username4</td>
                <td>reportID4</td>
                <td class="reportDoc">Document 4</td>
                <td>Date 4</td>
                <td><a href="admin_report_details.html">In Queue</a></td>
              </tr>

              <tr>
                <td>username5</td>
                <td>reportID5</td>
                <td class="reportDoc">Document 5</td>
                <td>Date 5</td>
                <td><a href="admin_report_details.html">In Queue</a></td>
              </tr>

              <tr>
                <td>username6</td>
                <td>reportID6</td>
                <td class="reportDoc">Document 6</td>
                <td>Date 6</td>
                <td><a href="admin_report_details.html">Completed</a></td>
              </tr>

              <tr>
                <td>username7</td>
                <td>reportID7</td>
                <td class="reportDoc">Document 7</td>
                <td>Date 7</td>
                <td><a href="admin_report_details.html">Completed</a></td>
              </tr>

              <tr>
                <td>username8</td>
                <td>reportID8</td>
                <td class="reportDoc">Document 8</td>
                <td>Date 8</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

              <tr>
                <td>username9</td>
                <td>reportID9</td>
                <td class="reportDoc">Document 9</td>
                <td>Date 9</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

              <tr>
                <td>username10</td>
                <td>reportID10</td>
                <td class="reportDoc">Document 10</td>
                <td>Date 10</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

                <tr>
                <td>username11</td>
                <td>reportID11</td>
                <td class="reportDoc">Document 11</td>
                <td>Date 11</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

                <tr>
                <td>username12</td>
                <td>reportID12</td>
                <td class="reportDoc">Document 12</td>
                <td>Date 12</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

                <tr>
                <td>username13</td>
                <td>reportID13</td>
                <td class="reportDoc">Document 13</td>
                <td>Date 13</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

                <tr>
                <td>username14</td>
                <td>reportID14</td>
                <td class="reportDoc">Document 14</td>
                <td>Date 14</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

 <tr>
                <td>username15</td>
                <td>reportID15</td>
                <td class="reportDoc">Document 15</td>
                <td>Date 15</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

               <tr>
                <td>username16</td>
                <td>reportID16</td>
                <td class="reportDoc">Document 16</td>
                <td>Date 16</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

               <tr>
                <td>username17</td>
                <td>reportID17</td>
                <td class="reportDoc">Document 17</td>
                <td>Date 17</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

             

              <tr>
                <td>username18</td>
                <td>reportID18</td>
                <td class="reportDoc">Document 18</td>
                <td>Date 18</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

              <tr>
                <td>username19</td>
                <td>reportID19</td>
                <td class="reportDoc">Document 19</td>
                <td>Date 19</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

              <tr>
                <td>username20</td>
                <td>reportID20</td>
                <td class="reportDoc">Document 20</td>
                <td>Date 20</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

              <tr>
                <td>username21</td>
                <td>reportID21</td>
                <td class="reportDoc">Document 21</td>
                <td>Date 21</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>


           <tr>
                <td>username22</td>
                <td>reportID22</td>
                <td class="reportDoc">Document 22</td>
                <td>Date 22</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>
   
     <tr>
                <td>username23</td>
                <td>reportID23</td>
                <td class="reportDoc">Document 23</td>
                <td>Date 23</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>



     <tr>
                <td>username24</td>
                <td>reportID24</td>
                <td class="reportDoc">Document 24</td>
                <td>Date 24</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>

              <tr>
                <td>username25</td>
                <td>reportID25</td>
                <td class="reportDoc">Document 25</td>
                <td>Date 25</td>
                <td><a href="admin_report_details.html">Received</a></td>
              </tr>


            </table>
            <div id="pageNavPosition" align="center"></div>
            <br />
          </form>

          <center>

          <script type="text/javascript"  ><!--
           reportsPerPage = listDisplayPerPg.options[listDisplayPerPg.selectedIndex].value;

           var pager = new Pager('tadminViewReport', reportsPerPage);
       
           pager.init();
           pager.showPageNav('pager', 'pageNavPosition');
           pager.showPage(1);
      


function Pager(tableName, itemsPerPage) {

   this.tableName = tableName;
   this.currentPage = 1;
   this.pages = 0;
   this.inited = false;

   this.showRecords = function(from, to) {       
       var rows = document.getElementById(tableName).rows;
       // i starts from 1 to skip table header row
       for (var i = 1; i < rows.length; i++) {
           if (i < from || i > to) 
               rows[i].style.display = 'none';
           else
               rows[i].style.display = '';
       }
   }

   this.showPage = function(pageNumber) {
           
       if (!this.inited)
       {
        alert("not inited");
        return;
       }

       var oldPageAnchor = document.getElementById('pg'+this.currentPage);
       oldPageAnchor.className = 'pg-normal';

       this.currentPage = pageNumber;
       var newPageAnchor = document.getElementById('pg'+this.currentPage);
       newPageAnchor.className = 'pg-selected';
              
       var from = (pageNumber - 1) * Number(itemsPerPage) + 1;
       var to = (from + Number(itemsPerPage)) - 1;
       this.showRecords(from, to);
       
       
       var pgNext = document.getElementById(this.pagerName + 'pgNext');

       var pgPrev = document.getElementById(this.pagerName + 'pgPrev');

       if (pgNext != null) {
           if (this.currentPage == this.pages) pgNext.style.display = 'none';
           else pgNext.style.display = '';
       }
       if (pgPrev != null) {
           if (this.currentPage == 1) pgPrev.style.display = 'none';
           else pgPrev.style.display = '';
       }
   } 
  
   this.prev = function() {
       if (this.currentPage > 1)
       {
           this.createPager(this.currentPage-4,this.currentPage); // it  used to move the cursor to privious index.
           this.showPage(this.currentPage - 1);
        }  
   }

   this.next = function() {
       if (this.currentPage < this.pages)
       {
    this.createPager(this.currentPage,this.currentPage+4);  //when i click the next button it is count the records      upto 5 . So indexing   is mainting the standed.

    this.showPage(this.currentPage + 1);  //it is used to print  imediate next records.
   
   
       }
   }                       

     this.init = function()
       { 
       var rows = document.getElementById(tableName).rows;
   

       var records = (rows.length - 1);
       this.pages = Math.ceil(records / itemsPerPage);
   
       this.inited = true;
   }



//it is used to  move the cursor upto 5 records.
    this.createPager = function(startEle,EndEle){
   
   
if(EndEle<=this.pages && startEle>0)
{
     var pagerName = 'pager';




var pagerHtml = ' <span id="' + pagerName + 'pgPrev" onclick="' + pagerName + '.prev();" class="pg-normal">   &#171 Prev  </span> &nbsp; ' ;    


var element = document.getElementById('pageNavPosition');     
for (var page = startEle; page <= EndEle; page++)
 

   pagerHtml += ' <span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + ' </span> &nbsp; ';          ;

  
    pagerHtml += ' <span id="' + pagerName + 'pgNext" onclick="'+ pagerName+'.next();" class="pg-normal"> Next &#187;</span> '; 
                                
      element.innerHTML = pagerHtml;
   
        }
   
    }

   this.showPageNav = function(pagerName, positionId) {
   
       if (! this.inited) {
           alert("not inited");
           return;
       }

  var element = document.getElementById(positionId);
  
   var pagerHtml = ' <span id="' + pagerName + 'pgPrev" onclick="' + pagerName + '.prev();" class="pg-normal"> &#171 Prev </span> &nbsp;  ';
   

       var totPages;  //for printing number of indexes per page
     
       if(this.pages >=5 )
       {
          // alert("pages value"+this.pages);
            totPages = 5
       }
       else
       {
      totPages = this.pages;
       }

       //it is used to print the  fixed 5 records.

  for (var page = 1; page <= totPages; page++)
     

           pagerHtml += ' <span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '  </span> &nbsp;';

       pagerHtml += ' <span id="   '   + pagerName + 'pgNext" onclick="'+ pagerName+'.next();" class="pg-normal"> Next &#187;</span> ';    
   
       element.innerHTML = pagerHtml;

   }
}
</script>
</center>

<style>
.pg-normal, .pg-selected{
    cursor:pointer;
    text-align: center;

}
.pg-selected{
    color:blue;
    text-align: center;
   
}
</style>




-------------------------------@-----------------------------------------@----------------------


    Wishing you All The Best-