The pager tag helper allows links based paging of data. Its links are also able to perform ajax updates and Json data page retrieval as explained in the ajax links section

The pager component is templated since it has a customizable layout template. The default template for the default server controls tag helper provider is here.

See it live

In the example above the same pager is "pasted" also in the footer of a grid.

pager may work either in autonomous mode, or in query. When in query mode it takes all paging information and the url where to request data from a QueryDescription object that contains also filtering, sorting and grouping information. In query mode it must be passed the property containing the QueryDescription. When the pager is placed in a toolbar of an IEnumerable rendering tag helper such as a grid it inherits the QueryDescription object from the ancestor tag helper. When in autonomous mode, instead, it must be passed the current page and the url where to request data. An example of a pager in autonomous mode is here while an example of a pager in query mode is here.

pager tag helper attributes

mode: enum PagerMode {OData=0, CustomPages}

In OData mode the pager puts in all its page links: number items to skip and number item to keep. In Custom mode the pager puts in all its page links: page number (1 is the first page), and the number of items per page. Default is Odata mode. This parameter makes sense only when the pager works in autonomous mode.

copy-html: string

Optional parameter. When provided the html created by the pager is copied in a transfer area with the name specified in the string. This html may be pasted in several other places with the paste-html tag helper. Usefull to create several copies of the pager in various areas of a control (as for instance a grid with a pager both in the header and in the footer).

url-default: string, url: ModelExpression

Needed and obligatory only in autonomous mode. Two ways to pass the url: as a constant, or in the View model. For server controls url-default suffices for both purposes, but for client contols where model is on the client side this is not the case. The url is expected to contains two tokens one for each of the parameters the pager specifies in each link. Tokens are replaced by actual parameter values.

skip-url-token: string

Needed only in autonomous mode, defaults to: _ skip_. The string token that will be substituted either by the items to skip or by the page number, depending on the pager mode.

take-url-token: string

Needed only in autonomous mode, defaults to: _ top_. The string token that will be substituted by the number of items per page.

page-size-default: int, page-size: ModelExpression

It defaults to 10. Two ways to pass page size: as a constant, or in the View model. For server controls page-size-default suffices for both purposes, but for client controls where model is on the client side this is not the case.

current-page-default: int, current-page: ModelExpression

Needed only in autonomous mode. Two ways to pass current page: as a constant, or in the View model. For server controls current-page-default suffices for both purposes, but for client controls where model is on the client side this is not the case.

current-query: ModelExpression

Needed and obligatory only in query mode. The property containing the QueryDescription object. When pager is placed in a toolbar it is inherited from the ancestor tag helper.

collection: ModelExpression

Needed and obligatory only for client TagHelper providers. The property containing the collection being paged. When pager is placed in a toolbar it is inherited from the ancestor tag helper. When using client side technologies it specifies the property of the client side ViewModel where to put data received by the server.

total-pages-default: int, total-pages: ModelExpression

Obligatory, for a good user experience. Two ways to pass total pages: as a constant, or in the View model. For server controls total-pages-default suffices for both purposes, but for client controls where model is on the client side this is not the case.

ajax-id, ajax-endpoint

It makes sense only in autonomous mode. In query mode this information is stored in the QueryDescriptionobject. Used for ajax paging. Documented in the ajax links section.

max-pages: int

It defaults to 5. The maximum number of page links to show on the left and right of the current page.

localization-type: Type

A type that when provided is used to create a localizer to localize all strings contained in the pager (strings in some buttons for instance). See here for more infos on how types are used for localization.

class: string

Css class to be applied on the pager root node.

layout-template: string

A partial view implementing a custom layout template.