title: Multiple pagination scripts in one page
body: <pre><code>function Pager(tableName, itemsPerPage) {
      this.tableName = tableName;
      this.itemsPerPage = itemsPerPage;
      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 &lt; rows.length; i++) {
           if (i &lt; from || i &gt; 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) * itemsPerPage + 1;
      var to = from + itemsPerPage - 1;
      this.showRecords(from, to);
  }   
  
  this.prev = function() {
      if (this.currentPage &gt; 1)
          this.showPage(this.currentPage - 1);
  }
  
  this.next = function() {
      if (this.currentPage &lt; 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 = '&lt;a id="myshow" onmousemove="one()"  onclick="' + pagerName + '.prev();" class="pg-normal pgnleft"&gt; &amp;#171 Prev &lt;/a&gt;  ';
          for (var page = 1; page &lt;= this.pages; page++) 
              pagerHtml += '&lt;span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');"&gt;' + page + '&lt;/span&gt;  ';
          pagerHtml += '&lt;span onclick="'+pagerName+'.next();" class="pg-normal pgnright"&gt; Next &amp;#187;&lt;/span&gt;';            
  
          element.innerHTML = pagerHtml;
      }
  }
  </code></pre>
  
  <p>I'm using that as a pagination script on a page I'm trying to make. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;&lt;!--
      var pager = new Pager('results', 2); 
      pager.init(); 
      pager.showPageNav('pager', 'pageNavPosition'); 
      pager.showPage(2);
  //--&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I have 5 tables in one page that is uses the first script so I tried putting the script above at the end of each table. When I do that, the paginations shows up and works but the pg-selected does not work. Is there anything I'm doing wrong? I also do this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;&lt;!--
      var pager2 = new Pager('results2', 2); 
      pager2.init(); 
      pager2.showPageNav('pager2', 'pageNavPosition2'); 
      pager2.showPage(2);
  //--&gt;&lt;/script&gt;
  </code></pre>
  
  <p>at the end of each table, I just replace the table name(results2 to results3, results4...). It looks wrong. Is there anyone there that can explain what I'm doing wrong?</p>