Markup for this Example

Data

The DataSource will deliver JSON data in the following format:

JavaScript

Set up the DataSource

• responseSchema.resultsList is set to the location in the JSON response of the key holding the list of records for the current page.
• responseSchema.totalRecords is set to the location in the JSON response of the key holding the total number of records.
• A custom function is created to translate JavaScript paging requests into something useful to the server.

Create a Paginator

For this example, we use a single container rather than allow DataTable to assign its default pagination containers. A custom layout for the pagination controls is used, set in the template attribute.

Note: the rowsPerPage configuration is required for all Paginator instances.

Hooking everything together in the DataTable config

Here's the interesting part.

• initialRequest needs to target data that will populate at least the data on the page specified in the Paginator's initialPage configuration (1 by default).
• generateRequest is set to our custom function.
• paginator is assigned the Paginator instance.
• paginationEventHandler is set to DataTable's default DataSource relay, handleDataSourcePagination. If more intricate DataSource interaction is needed, assign a custom function.

Voila, Server side paginated DataTable!

Finally, instantiate the DataTable with the DataSource and configuration.