Change 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.

FooTable.get('#table-id').pageSize(newSize);

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){
	e.preventDefault();
	var newSize = $(this).data('pageSize');
	FooTable.get('#page-size-example').pageSize(newSize);
});