meta info

Paging TagHelper Attributes

By Ziya Mollamahmut

Quick navigation

Required attributes

Html attribute name Json attribute Value type Default value Description
page-no - int 1 Current page number
page-size - int 10 How many items to display in one page
total-records - int 0 Total count of all records
Goto top

Optional attributes

General settings attributes

Html attribute name Json attribute Value type Default value Description
max-displayed-pages yes int 10 Total amount of displayed page numbers
page-size-dropdown-items yes string 10-25-50 Numbers to display in the dropdown for selecting page size
settings-json - string default Default name of json settings group name
Goto top

Query string attributes

Attributes to set the query string key names for page number and page size parameters.

Html attribute name Json attribute Value type Default value Description
query-string-key-page-no yes string P Query string key name of page number
query-string-key-page-size yes string S Query string key name of page size
Goto top

Display attributes

Attributes to show/hide specific controls of the paging taghelper.

Html attribute name Json attribute Value type Default value Description
show-page-size-nav yes bool true show/hide page size dropdown list
show-first-last yes bool true show/hide "goto first/last record" navigation buttons
show-prev-next yes bool true show/hide "goto previous/next record" navigation buttons
show-total-pages yes bool true show/hide total pages count badge
show-total-records yes bool true show/hide total records count badge
show-gap yes bool true Show a three dots after first page or before last page when there is a gap in pages at the beginning or end. e.g. 1 ... 12 13 14 [15] 16 17 18 ... 100
Goto top

Text attributes

Attributes to set the texts of the buttons and labels.

Html attribute name Json attribute Value type Default value Description
text-page-size yes string "{0}" The text to display on the page size label. The text must contain a placeholder in a formatted string as: "Show {0} pages"
text-first yes string « Text for goto first record button
text-last yes string » Text for goto last record button
text-previous yes string ‹ Text for goto previous record button
text-next yes string › Text for goto next record button
text-total-pages yes string pages Text for total pages badge e.g. 100 pages
text-total-records yes string records Text for total records badge e.g. 1000 records
number-format yes string default See Number format for more details.
Goto top

Texts for screen readers

Attributes for screen readers.

Html attribute name Json attribute Value type Default value Description
sr-text-first yes string First Screen reader text for goto first record button
sr-text-last yes string Last Screen reader text for goto last record button
sr-text-previous yes string Previous Screen reader text for goto previous record button
sr-text-next yes string Next Screen reader text for goto next record button
Goto top

Styling attributes

Attributes to set class names for the html parts of the paging controls.

Html attribute name Json attribute Value type Default value Description
class yes string row Class name of the main div
class-paging-control-div yes string col Class name for the paging control div
class-info-div yes string col-2 Class name for the info div
class-page-size-div yes string col-1 Class name for the page size div
class-paging-control yes string pagination Class name for the paging control
class-active-page yes string active Class name for the currently active page
class-total-pages yes string badge badge-light Class name for the total pages info badge
class-total-records yes string badge badge-dark Class name for the total records info badge
class-disabled-jumping-buttons yes string disabled Class name for the navigation buttons e.g. goto first/last/prev/next buttons while they are disabled.
class-page-link yes string null Class name for the page link item. This value will be added next to the fixed class page-link.
Goto top

PagingTagHelper will render a bootstrap styled paging control. By default it is like below:

<!-- main div -->
<div class="row>
    <!-- paging control div -->
    <div class="col">
        <!-- page numbers unordered list -->
        <ul class="pagination">
        </ul>
    </div>

    <!-- page size div (dropdown nav) -->
    <div class="col-1">
    </div>

    <!-- info div (total pages/records) -->
    <div class="col-2">
    </div>
</div>