title: How to use pagination on HTML tables?
body: <p>I am trying to use this Pagination <a href="http://flaviusmatis.github.io/simplePagination.js/" rel="noreferrer">library</a> in my HTML table page (specifically light theme) but somehow I am not able to understand how to plugin this library in such a way in my HTML page so that I can have pagination code working in my HTML table..</p>
  
  <p>Right now, I have HTML table without any pagination code working so my below HTML code will show you a table with all the rows in one page which is not what I want... </p>
  
  <p>I want to show 6 items in my table in one page by using above pagination javascript.. And as soon as I click on second pagination tab, it should show me next six items and keep on going until it is finished..</p>
  
  <p>Below is my full HTML code in which I have tried using the same above pagination javascript but it doesn't work for me..</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="../jquery.simplePagination.js"&gt;&lt;/script&gt;
  &lt;link href="../simplePagination.css" rel="stylesheet" type="text/css" /&gt;
  
  
      &lt;style type="text/css"&gt;
  table {
      width: 40em;
      margin: 2em auto;
      }
  
      thead {
      background: #000;
      color: #fff;
      }
  
      td {
      width: 10em;
      padding: 0.3em;
      }
  
      tbody {
      background: #ccc;
      }
  
      &lt;/style&gt;
  
      &lt;script&gt;
  
  function test(pageNumber)
  {
  
    var page="#page-id-"+pageNumber;
    $('.select').hide()
    $(page).show()
  
  }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body bgcolor="#F8F8F8"&gt;
      &lt;table class="paginated"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;A&lt;/th&gt;
  
                  &lt;th&gt;B&lt;/th&gt;
  
                  &lt;th&gt;C&lt;/th&gt;
  
                  &lt;th&gt;D&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
  
                  &lt;td&gt;2&lt;/td&gt;
  
                  &lt;td&gt;3&lt;/td&gt;
  
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
  &lt;div id="choose"&gt;
  &lt;/div&gt;
  
  
      &lt;script language="javascript"&gt;
      $(function() {
          $('#choose').pagination({
              items: 20,
              itemsOnPage: 2,
              cssStyle: 'light-theme',
              onPageClick: function(pageNumber){test(pageNumber)}
          });
      });
      &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any simple jsfiddle example basis on my above HTML code and also combined with above pagination javascript will help me understand better in how to imlement this js on the HTML tables..</p>
  
  <p>Thanks for the help..</p>
  
  <p><strong>NOTE:-</strong></p>
  
  <p><strong>I am only interested in simplePagination.js solution only which I am currently trying to implement</strong></p>