Show N rows per page in HTML table

Question

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 sh

Answer 1

You may select one of the "maxRows" options on document ready. For instance, you may select the last option:

$('#maxRows option:last').prop('selected', true).trigger('change');

You need to trigger the change event so that all is rearranged according to the "change" event.

The snippet:

$(document).ready(function () {
  getPagination('#Tabla');
  $('#maxRows option:last').prop('selected', true).trigger('change');
});

function getPagination(table) {

  $('#maxRows').on('change', function(e) {
    $('.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 > maxRows) { // if tr number gt maxRows

        $(this).hide(); // fade it out
      }
      if (trnum <= maxRows) {
        $(this).show();
      } // else fade in Important in case if it ..
    }); //  was fade out to fade it in
    if (totalRows > 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 <= pagenum;) { // for each page append pagination li
        $('.pagination').append('
\
' + i++ + '(current)\
').show();
      } // end for i
    } // end if row count > 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 > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) {
          $(this).hide();
        } else {
          $(this).show();
        } //else fade in
      }); // end of for each tr in table
    }); // end of on click pagination list


  });

  // end of on select change



  // END OF PAGINATION
}

    

        

            
            
                Show ALL Rows
                1
                2
                3
            
        
    
    

        

            

                

                

                    
ID
                    
Family
                
                
                

                

                    
1
                    
A
                
                

                    
2
                    
B
                
                

                    
3
                    
A
                
                

                    
4
                    
D
                
                

                    
5
                    
A