Pagination

To implement pagination, query parameters are usually used, which indicate how much data should be returned on the current page, how many records per page should be displayed, and what page number should be shown. The most commonly used query parameters for pagination are:

Page or PageNo: current page number (starting from 1). RecordsOnPage: number of elements per page (usually used to limit the amount of data returned per page).

For example, a request to get the first 20 items of a product listing on the second page might look like this:

GET /products?page=2&RecordsOnPage=20

Note

NOTE For pagination to work it is important to place it inside the GET form and add the pagination data.

Pagination example

This code is for a pagination component that displays and navigates through a table of data with 20 records per page by default. It includes previous and next page buttons, a dropdown menu for selecting the number of records to display per page, and a button to update the table based on the selected number of records.

<form method="get" data-pagination>
<!-- Pagination interface -->
<div class="pagination aligner aligner--contentStart aligner--centerVertical">
    <!-- Previous page button -->
    <button class="button--icon button--outlined icon-Chevron-Left"  id="previous-button"></button>

    <!-- Current page number -->
    <input type="hidden" name="Data.Example.PageNo"  id="page" value="{{ .Data.Example.PageNo }}">
    <p class="aligner aligner--centerVertical"> Page {{ .Data.Example.PageNo }} </p>

    <!-- Next page button -->
    <button class="button--icon  button--outlined icon-Chevron-Right"  id="next-button"></button>

    <!-- Results per page dropdown -->
    <p class="aligner aligner--centerVertical">Results per page</p>
    <select class="select margin-left-16 aligner aligner--centerVertical" name="Data.Example.RecordsOnPage" id="select">
        <option value="20"  {{if eq "20"  $.Data.Example.RecordsOnPage}}selected{{end}}>20</option>
        <option value="50" {{if eq "50"  $.Data.Example.RecordsOnPage}}selected{{end}}>50</option>
        <option value="100"  {{if eq "100"  $.Data.Example.RecordsOnPage}}selected{{end}}>100</option>
    </select>

    <!-- Show button to submit selected number of results per page -->
    <button  id="show"  class="button button--primary">Show</button>
</div>
</form>