title: >Client side using pagination code show some error?
body: <p>HI i m using javascript code for client side and my data is dynamic and first is page load if i click to a <code>button</code> than data loading .</p>
  
  <p>i m finding this code in google and using to our projects but i have face one error if i click to <code>button</code> than show data and showing pagination after that i click to pagination number than show error in <code>console</code>,</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: pager is not defined</p>
  </blockquote>
  
  <p>My Code is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  
     $('.rohit').on('click',function(){
      alert('Rohit');
  
      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;span onclick="' + pagerName + '.prev();" class="pg-normal"&gt; &amp;#171 Prev &lt;/span&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"&gt; Next &amp;#187;&lt;/span&gt;';            
          
          element.innerHTML = pagerHtml;
      }
  };
  
  var pager = new Pager('results', 3); 
          pager.init(); 
          pager.showPageNav('pager', 'pageNavPosition'); 
          pager.showPage(1);
     });
  
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table cellpadding="0" cellspacing="0" border="0" class="table-bordered" id="results"&gt;
                                                &lt;thead&gt;
                                                    &lt;th&gt;S.no&lt;/th&gt;
                                                &lt;/thead&gt;
                                                &lt;tbody id="userData"&gt;
                                                    &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;/tr&gt; 
                                                &lt;/tbody&gt;
                                          &lt;/table&gt;
                                          &lt;div id="pageNavPosition"&gt;&lt;/div&gt;
  
                                          &lt;span class="rohit"&gt;Click to this &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>