# Change page size

## How to dynamically change the page size of the table

#### Note

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.

    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);
    });