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:

   
     Show ALL Rows
     1
     2
     3
   
   

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