Change page size

How to dynamically change the page size of the table


The base table in the example below is a clone of the showcase example to demonstrate that changing the page size will correctly update the pagination buttons whether you increase or decrease the page size.

Select the page size

To dynamically change the page size of the table when a user clicks a button or selects a value from a dropdown is quite simple. All you need to do is get the instance of FooTable you want to alter and execute the pageSize method passing in the new size you want the table to use.


On this page the buttons are created using the below markup. The size is simply stored in a data attribute on the button to make it simpler to bind the click event and retrieve the page size value.

<button type="button" data-page-size="10">10</button>
<button type="button" data-page-size="20">20</button>
<button type="button" data-page-size="50">50</button>
<button type="button" data-page-size="100">100</button>
<button type="button" data-page-size="200">200</button>

And then the Javascript to make it all work is as below.

$('[data-page-size]').on('click', function(e){
	var newSize = $(this).data('pageSize');