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

First, I would suggest to use a library for table features like sorting, filtering, paging... as you are really re-inventing the wheel.

But, for the problem you raise, you have to make two adjustments:

1. In your HTML, mark the option with selected that has your desired number of pages to display at page load, like 3:

   <select class="form-control" name="state" id="maxRows">
     <option value="5000">Show ALL Rows</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3" selected>3</option>
   </select>
   

2. In your code, call the .trigger('change') method on the maxRows element:

   $('#maxRows').on('change', function() {
       // all code here can stay as it is
       // ...
   }).trigger('change');
   

That's it.

See updated fiddle

Answer 2

I have changed your code, Check this . The function which is creating the pagination works as it is. Just a minor changes ni code

 $(document).ready(function () {
        $('#maxRows').on('change', function() {
            getPagination('#Tabla',$(this).val());
        });
    getPagination('#Tabla',2); // the no of rows default you want to show
});

function getPagination(table,noRows) {

 $('.pagination').html(''); // reset pagination 
    var trnum = 0; // reset tr counter 
    var maxRows = noRows; // 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('<li class"wp" data-page="' + i + '">\
                                      <span>' + i++ + '<span class="sr-only">(current)</span></span>\
                                    </li>').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
}

Update your Fiddle

Answer 3

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('<li class"wp" data-page="' + i + '">\
<span>' + i++ + '<span class="sr-only">(current)</span></span>\
</li>').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
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container-fluid">
    <div class="row">
        <div class="input col-md-1 col-xs-2">
            <!--		Show Numbers Of Rows 		-->
            <select class="form-control" name="state" id="maxRows">
                <option value="5000">Show ALL Rows</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
    </div>
    <div class="row col-md-12 col-xs-12">
        <div class="table-responsive">
            <table class="table table-striped table-hover table-condensed table-bordered" id="Tabla">
                <thead>
                <tr class="info">
                    <td>ID<span class="hidden-xs"></span></td>
                    <td>Family<span class="hidden-xs"></span></td>
                </tr>
                </thead>
                <tbody id="TablaFamilias">
                <tr>
                    <td>1</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>B</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>D</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>A</td>
                </tr>
                </tbody>
                <tfoot></tfoot>
            </table>
            <div>
                <nav>
                    <ul class="pagination"></ul>
                </nav>
            </div>
        </div>
    </div>
</div>