title: Show N rows per page in HTML table
body: <p>Hello I have an html table with a lot of rows and I use a JavaScript code to add a pagination option, works fine but when I load the document shows all the rows and I want to show only 5, 10, or whatever but not all the rows. Here is my JavaScript code and the working Fiddle:</p>
  
  <pre><code> $(document).ready(function () {
      getPagination('#Tabla');
  });
  
  function getPagination(table) {
  
    $('#maxRows').on('change', function() {
      $('.pagination').html(''); // reset pagination 
      var trnum = 0; // reset tr counter 
      var maxRows = parseInt($(this).val()); // get Max Rows from select option
      var totalRows = $(table + ' tbody tr').length; // numbers of rows 
      $(table + ' tr:gt(0)').each(function() { // each TR in  table and not the header
        trnum++; // Start Counter 
        if (trnum &gt; maxRows) { // if tr number gt maxRows
  
          $(this).hide(); // fade it out 
        }
        if (trnum &lt;= maxRows) {
          $(this).show();
        } // else fade in Important in case if it ..
      }); //  was fade out to fade it in 
      if (totalRows &gt; maxRows) { // if tr total rows gt max rows option
        var pagenum = Math.ceil(totalRows / maxRows); // ceil total(rows/maxrows) to get ..  
        //    numbers of pages 
        for (var i = 1; i &lt;= pagenum;) { // for each page append pagination li 
          $('.pagination').append('&lt;li class"wp" data-page="' + i + '"&gt;\
                                        &lt;span&gt;' + i++ + '&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/span&gt;\
                                      &lt;/li&gt;').show();
        } // end for i 
      } // end if row count &gt; max rows
      $('.pagination li:first-child').addClass('active'); // add active class to the first li 
      $('.pagination li').on('click', function() { // on click each page
        var pageNum = $(this).attr('data-page'); // get it's number
        var trIndex = 0; // reset tr counter
        $('.pagination li').removeClass('active'); // remove active class from all li 
        $(this).addClass('active'); // add active class to the clicked 
        $(table + ' tr:gt(0)').each(function() { // each tr in table not the header
          trIndex++; // tr index counter 
          // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out
          if (trIndex &gt; (maxRows * pageNum) || trIndex &lt;= ((maxRows * pageNum) - maxRows)) {
            $(this).hide();
          } else {
            $(this).show();
          } //else fade in 
        }); // end of for each tr in table
      }); // end of on click pagination list
  
  
      });
  }
  </code></pre>
  
  <p>Fiddle:</p>
  
  <p><a href="https://jsfiddle.net/u2e1qvyb/3/" rel="nofollow">Working Code</a></p>