Link Search Menu Expand Document
Punch UI

Pagination

A long list can be divided into several pages using Pagination, and only one page will be loaded at a time.

  1. Registration
    1. Component name
  2. Examples
    1. Basic pagination
    2. Grid
    3. Small size
    4. More pages
  3. Razor Pages
  4. API
  5. Defaults override.

Registration

Paginantion could be registered with all components at same time or individually:

import * as ko from "knockout";
import { registerPaginationComponent } from "punch-ui";
...
function bootstrap() {
    registerPaginationComponent();
    const app = new App();
    ko.applyBindings(app);
}

Component name

Default component name is pagination, but you can name it whatever you want, just pass your component name to registration function:

registerPaginationComponent("my-pagination");

or when registering all components:

registerComponents({ paginationComponentName: "my-pagination" });

Examples

Basic pagination

To use the basic pagination specify totalItems and onChange handler. Total items property can be a Knockout Observable as well.

Showing 1 - 10 of 100
  • 1
  • 2
  • 3
  • 4
  • 5 
<pagination params="{ totalItems: 100, onChange: onChange}"></pagination>

Grid

Pagination component layout is build with Bootstrap Grid. So you can use it as a column in your custom row.

My custom Column.
Showing 1 - 10 of 100
  • 1
  • 2
  • 3
  • 4
  • 5 
<div class="row align-items-center">
    <div class="col-12 col-md-4 fw-bold">
        My custom Column.
    </div>
    <div class="col-12 col-md-8">
        <pagination params="{ totalItems: 100, onChange: onChange}"></pagination>
    </div>
</div>

Small size

Need smaller component? Set size property to small.

Showing 1 - 10 of 100
  • 1
  • 2
  • 3
  • 4
  • 5 
<pagination params="{ totalItems: 100, onChange: onChange, size: 'small'}"></pagination>

More pages

To show more pages specify visiblePagesCount parameter.

Showing 1 - 10 of 100
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10 
<pagination params="{ totalItems: 100, onChange: onChange, visiblePagesCount: 10 }"></pagination>

Razor Pages

You can use pagination inside .Net Razor Pages. Selected pageSize and currentPage values could be bound to page model with query strings. You should set useQueryStringParameters to true and paginator will change query string parameters and reload page on change. You can also override default query string parameters names, for each component using pageSizeQueryString and currentPageQueryString properties.

<pagination params="{ totalItems: @Model.Total,
            pageSize: @Model.PageSize,
            currentPage: @Model.CurrentPage,
            useQueryStringParameters: true}"></pagination>

API

Property Description Type Default Version
currentPage Current page number. ko.Observable<number> | number 1 1.0.6
currentPageQueryString Query string parameter name for current page. Used if useQueryStringParameters is set to true string currentPage 1.0.6
icons Custom icons class names for previous and next buttons. {prev: string, next: string} - 1.0.6
onChange Called when the page number or pageSize is changed, and it takes the resulting page number and pageSize as its arguments. (page: number, pageSize: number): void - 1.0.6
pageSize Default number of data items per page. ko.Observable<number> | number 10 1.0.6
pageSizeCookieName Cookie name to store selected page size across application. Will be used if useCookieForPageSize property is set to true string pageSize 1.0.6
pageSizeOptions Specify the sizeChanger options. number[] [10, 20, 30, 40, 50] 1.0.6
pageSizeQueryString Query string parameter name for page size. Used if useQueryStringParameters is set to true string currentPage 1.0.6
size Specify the size of Pagination, can be set to small. "default" | "small" default 1.0.6
totalItems Total number of data items. ko.Observable<number> | number 0 1.0.6
useCookieForPageSize Indicates whether should store page size in cookies and use stored value as default. boolean false 1.0.6
useQueryStringParameters Indicates whether should get values and update query string parameters for page size and current page. boolean false 1.0.6
visiblePagesCount Maximum count of buttons to switch current page. number 5 1.0.6

Defaults override.

You can override global default values of API Properties in order to not specify it for each component separately.
Note that it is not necessary to overwrite all the defaults, overwrite only what you need.

import * as ko from "knockout";
import { registerPaginationComponent, overrideConfiguration } from "punch-ui";
...
function bootstrap() {
    const paginationConfiguration = {
        currentPageQueryString: "pageNumber",
        icons: {
            next: "next-icon",
            prev: "prev-icon",
        },
        useCookieForPageSize: true,
        size: "small",
        useQueryStringParameters: true,
        initialCurrentPage: 2,
        pageSize: 20,
        pageSizeOptions: [20, 50, 100],
        pageSizeCookieName: "pageSizeCookie",
        pageSizeQueryString: "pageSize",
        visiblePagesCount: 10,
    };
    overrideConfiguration({pagination: paginationConfiguration, });
    registerPaginationComponent();
    const app = new App();
    ko.applyBindings(app);
}