Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to develop javascript pagination for web pages

    • 0
    • 0
    • 0
    • 0
    • 2
    • 0
    • 0
    • 0
    • 1.52k
    Comment on it

    Hello guys,
    If you want to develop pagination for web pages using javascript, the below code will help you.
    So do not worry, just follow bellow mentioned steps todevelop pagination with HTML table.

    Step 1:
    Write CSS in style tag

    <style type="text/css">  
        .pg-normal {  
            color: #0000FF;  
            font-weight: normal;  
            text-decoration: none;  
            cursor: pointer;  
        }  
    
        .pg-selected {  
            color: #800080;  
            font-weight: bold;  
            text-decoration: underline;  
            cursor: pointer;  
        }  
        </style> 
    

    Step 2:
    Write javascript code in script tag

    <script>
    
       function Pager(tableName, itemsPerPage,showCurrentRecord) {  
          this.tableName = tableName;  
          this.itemsPerPage = itemsPerPage;  
          this.currentPage = 1;  
          this.pages = 0;  
          this.inited = false; 
          this.showCurrentRecord=showCurrentRecord;
    
    
          this.showRecords = function(from, to) {          
              var rows = document.getElementById(tableName).rows;  
              // i starts from 1 to skip table header row
              var showCount=0;
              for (var i = 1; i < rows.length; i++) {  
                  if (i < from || i > to)   { 
                      rows[i].style.display = 'none'; 
    
    
                  }
                  else  {
                      ++showCount;
                      rows[i].style.display = '';  
                  }
              } 
              this.count(showCount);
    
          }  
    
          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) * itemsPerPage + 1;  
              var to = from + itemsPerPage - 1;  
    
              this.showRecords(from, to);  
          }     
    
          this.prev = function() {  
              if (this.currentPage > 1)  
                  this.showPage(this.currentPage - 1);  
          }  
    
          this.next = function() {  
              if (this.currentPage < this.pages) {  
                  this.showPage(this.currentPage + 1);  
              }  
          }                          
    
          this.init = function() {  
              var rows = document.getElementById(tableName).rows;  
              var records = (rows.length - 1);   
              this.pages = Math.ceil(records / itemsPerPage);  
              this.inited = true;  
          }  
    
          this.showPageNav = function(pagerName, positionId) {  
           if (! this.inited) {  
            alert("not inited");  
            return;  
           }  
            var element = document.getElementById(positionId);  
    
           var pagerHtml = '<span onclick=" '+ pagerName + '.prev();" class="pg-normal"> &laquo; </span> ';  
           for (var page = 1; page <= this.pages; page++)   
               pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span>  ';  
           pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> &raquo;</span>'; 
    
    
    
           element.innerHTML = pagerHtml; 
    
          }  
    
    
          this.count=function(count){
    
          var rowCount = document.getElementById(tableName).rows.length-1;
          document.getElementById(showCurrentRecord).innerHTML = 'Showing '+count+' of '+rowCount;
          }
    
      } 
    
    </script>
    

    Step 3:
    Create HTML page with table

     <table id="tableID"width="100%"> 
                          <thead> 
                            <tr> 
                                <th>User name</th> 
                                <th>Case number</th> 
                            </tr> 
                            </thead> 
                            <tbody> 
                               <tr> 
                                <td>Bhagwan</td> 
                                <td>56456</td> 
                            </tr> 
                                  <tr> 
                                <td>Chandan</td> 
                                <td>56546</td> 
                            </tr> 
                          </tbody> 
                    </table>
    
    <div id="showRecordCount" class="col-md-3"></div> // showing rows count
              <div id="pageNavPosition" >    </div>// showing pagination  
               <script type="text/javascript">
                var pager = new Pager('tableID', 13,'showRecordCount');   
                pager.init();   
                pager.showPageNav('pager', 'pageNavPosition');   
                pager.showPage(1);  
               </script> 
    

    Note: Put all code in single HTML page.
    Now look, your pagination is ready for use.
    That's all

 2 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: