Ndtyjky

I created a pagination for a table in a HTML page using jQuery. Following code is working.

  $(document).ready(function(){

      $('#transactionsTable').after('<ul id="nav" class="pagination"></ul>');

      var rowsShown = 10;

      var rowsTotal = $('#transactionsTable tbody tr').length;

      var numPages = rowsTotal/rowsShown;

      for(i = 0;i < numPages;i++) {

          var pageNum = i + 1;

          $('#nav').append('<li class="page-item"><a class="page-link" href="#" rel="'+i+'">'+pageNum+'</a></li> ');

      }

      $('#transactionsTable tbody tr').hide();

      $('#transactionsTable tbody tr').slice(0, rowsShown).show();

      $('#nav a:first').addClass('active');

      $('#nav a').bind('click', function(){



          $('#nav a').removeClass('active');

          $(this).addClass('active');

          var currPage = $(this).attr('rel');

          var startItem = currPage * rowsShown;

          var endItem = startItem + rowsShown;

          $('#transactionsTable tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).

          css('display','table-row').animate({opacity:1}, 300);

      });

  });

It shows 10 rows of the table per page and the pagination bar. Now I want to set the number of rows show per page dynamic. So I created a <select> with several <option> s like 10, 25, 50, 100

<select id="pagingCount" class="">

          <option value="10">10</option>

          <option value="25">25</option>

          <option value="50">50</option>

          <option value="100">100</option>

        </select>

and change the code as follows

var rowsShown = $('#pagingCount').val();

but it is not working. Always it shows 10 rows per page. How can I fix this?

You will have to change the value of rowsShown in your code block.

function showRows(rowsShown){

      $('#transactionsTable').after('<ul id="nav" class="pagination"></ul>');

      var rowsTotal = $('#transactionsTable tbody tr').length;

      var numPages = rowsTotal/rowsShown;

      for(i = 0;i < numPages;i++) {

          var pageNum = i + 1;

          $('#nav').append('<li class="page-item"><a class="page-link" href="#" rel="'+i+'">'+pageNum+'</a></li> ');

      }

      $('#transactionsTable tbody tr').hide();

      $('#transactionsTable tbody tr').slice(0, rowsShown).show();

      $('#nav a:first').addClass('active');

      $('#nav a').bind('click', function(){



          $('#nav a').removeClass('active');

          $(this).addClass('active');

          var currPage = $(this).attr('rel');

          var startItem = currPage * rowsShown;

          var endItem = startItem + rowsShown;

          $('#transactionsTable tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).

          css('display','table-row').animate({opacity:1}, 300);

      });



}

  $(document).ready(function(){

   showRows(10);

  });



$("#pagingCount").on("change", function(e){

  showRows(e.target.value);

});

Hope this will work for you.

You have to try use :selected to get the current value.

var rowsShown = $('#pagingCount option:selected').val();

You can achieve selected value by using this code.

Its simple in JQuery to get selected value.

var rowsShown= $('#pagingCount').find(":selected").text();