Paging TagHelper v4.0

Paging TagHelper v4.0 >= v3.1

Full Docs

This page containes few samples, for full documentation please visit DOCS.Ziyad.info.

Verison Notice

This document is for v4.0 and newer. Goto v3.1, v3.0

Sample : Cultures Table

Culture Id	English name	Native name	Two letter ISO language name
1076	isiXhosa (South Africa)	isiXhosa (eMzantsi Afrika)	xh
53	isiZulu	isiZulu	zu
1077	isiZulu (South Africa)	isiZulu (iNingizimu Afrika)	zu
16	Italian	italiano	it
1040	Italian (Italy)	italiano (Italia)	it
«First ‹Previous 1 ... 77 78 79 80 81 82 83 84 85 86 ... 169 ›Next »Last 10 25 50 169 pages841 records

Installation

Install from nuget

Install-Package LazZiya.TagHelpers

Add to _ViewImposrts.cshtml

@addTagHelper *, LazZiya.TagHelpers

Minimum settings

Only below parameters is required to create pagination control.

HTML Code


<paging total-records="Model.TotalRecords"
        page-no="Model.PageNo"
        page-size="Model.PageSize">
</paging>

Result

169 pages841 records

Go to page top

Turn off all extras

Show/Hide Previous-Next, first-last buttons and Gap...

HTML Code


    <paging total-records="Model.TotalRecords"
            page-no="Model.PageNo"
            page-size="Model.PageSize"
            show-prev-next="false"
            show-first-last="false"
            show-total-pages="false"
            show-total-records="false"
            show-page-size-nav="false"
            show-gap="false">
    </paging>

Result

Go to page top

Maximum displayed pages

Increase/decrease the amount of displayed page numbers to arrange better replacment on wider/small screens

Default: 10

HTML Code


    <paging total-records="Model.TotalRecords"
            page-no="Model.PageNo"
            page-size="Model.PageSize"
            max-displayed-pages="5">
    </paging>

Result

169 pages841 records

Only current page


    <paging total-records="Model.TotalRecords"
            page-no="Model.PageNo"
            page-size="Model.PageSize"
            show-page-size-nav="false"
            show-total-pages="false"
            show-total-records="false"
            max-displayed-pages="1">
    </paging>

Result

No page numbers


    <paging total-records="Model.TotalRecords"
            page-no="Model.PageNo"
            page-size="Model.PageSize"
            show-page-size-nav="false"
            show-total-pages="false"
            show-total-records="false"
            max-displayed-pages="0">
    </paging>

Result

Go to page top

Change page size

Default page size is 10, it can be changed to any other number. When a differet page size is used we have to specify the query string key name for page size parameter.

page-size-dropdown-items : A list of dash delimitted numbers for the dropdown.

HTML Code


    <paging total-records="Model.TotalRecords"
            page-no="Model.PageNo"
            page-size="Model.PageSize"
            max-displayed-pages="5"
            page-size-dropdown-items="5-15-30">
    </paging>

Result

169 pages841 records

Go to page top

Query String Key Names

Current page number and page size values are added to the query string by the keys "P" and "S".
e.g. /index?p=1&s=10.

To change the query string key names use below attributes:

query-string-key-page-no : key name for page number. default is "p".
query-string-key-page-size : key name for page size. default is "s".

HTML Code


    <paging total-records="Model.TotalRecords"
            page-no="Model.PageNo"
            page-size="Model.PageSize"
            max-displayed-pages="5"
            query-string-key-page-no="pageNo"
            query-string-key-page-size="pageSize">
    </paging>

Result

/index?pageNo=1&pageSize=10

Go to page top

Styling

PagingTagHelper uses bootstrap 4.x styling classes by default. The default structure is like below:


<!-- main div -->
<div class="row">
    <!-- paging control div -->
    <div class="col">
        <!-- paging control : 1 [2] 3 4 5 -->
    </div>
    <!-- page size div -->
    <div class="col-1">
        <!-- page size dropdown : Page size 10-20-30 -->
    </div>
    
    <!-- info div -->
    <div class="col-2">
        <!-- info badges: totals records / total pages -->
    </div>
    
</div>

class :
Relevant to the most outer div that contains all controls.
Default: "row"
class-paging-control-div :
The div that contains the paging numbers.
Default: "col"
class-page-size-div :
The div that contains page size dropdown control and its label.
Default: "col-2"
class-info-div :
The div that contains the info badges for total pages/total records.
Default: "col-2"
class-paging-control :
The unordered list control that holds the page numbers. For better understanding Bootstrap pagination.
Default: "pagination"
class-active-page :
Selected page class.
Default: "active"
class-disabled-jumping-button :
First/Last and Previous/Next buttons while not active.
Default: "disabled"
class-total-pages :
Total pages info badge.
Default: "badge badge-secondary"
class-total-records :
Total records info badge.
Default: "badge badge-info"

HTML Code


    <paging total-records="Model.TotalRecords"
            page-no="Model.PageNo"
            page-size="Model.PageSize"
            max-displayed-pages="5"
            class="row"
            class-paging-control-div="col"
            class-info-div="col-2"
            class-page-size-div="col-1"
            class-paging-control="pagination"
            class-active-page="active"
            class-disabled-jumping-button="disabled"
            class-total-pages="badge badge-secondary"
            class-total-records="badge badge-info">
    </paging>

Go to page top

Custom Labels

All labels except page numbers can be customized as below:

text-first : Label for "goto first page" button
default: "«" ( « )
text-last : Label for "goto last page" button
default: "»" ( » )
text-previous : Label for "goto previous page" button
default: "&lsaquo;" ( ‹ )
text-next : Label for "goto next page" button
default: "&rsaquo;" ( › )
text-total-pages : Label for "total pages" info badge
default: "Pages"
text-total-records : Label for "total records" info badge
default: "Records"
text-page-size : Label for "page size" dropdown
default: "Page size"
sr-text-first : Label for screen readers
default: "First"
sr-text-last : Label for screen readers
default: "Last"
sr-text-next : Label for screen readers
default: "Next"
sr-text-previous : Label for screen readers
default: "Previous"

HTML Code


    <paging total-records="Model.TotalRecords"
            page-no="Model.PageNo"
            page-size="Model.PageSize"
            max-displayed-pages="5"
            text-first="&laquo;"
            text-last="&raquo;"
            text-previous="&lsaquo;"
            text-next="&rsaquo;"
            text-total-pages="Pages"
            text-total-records="Records"
            text-page-size="Page size"
            sr-text-first="First"
            sr-text-last="Last"
            sr-text-next="Next"
            sr-text-previous="Previous">
    </paging>

Go to page top

Number Formats

Change number formats to display numbers in any culture. Just provide a list of numbers splitted by spaces "0 1 2 3 4 5 6 7 8 9", or use the built in NumberFormats.

HTML Code


    <paging total-records="Model.TotalRecords"
            page-no="Model.PageNo"
            page-size="Model.PageSize"
            number-format="@NumberFormats.Hindi">
    </paging>

Result

NumberFormats.Hindi

١٦٩ pages٨٤١ records

NumberFormats.Roman

CLXIX pagesDCCCXLI records

NumberFormats.Hex

A9 pages349 records

Browse all number formats for more options.

Go to page top

Json Settings

All default settings can be overrided in appsettings.json file and it will affect all paging tag helpers in the application. Any settings defined inside the tag helper will override the default and json settings.

the default json settings can be overrided in appSettings.json, below is a full list of all settings in json format:


{
    "lazziya": {
        "pagingTagHelper": {
          "default": {
            "page-no": 1,
            "page-size": 10,
            "total-records": 0,
            "max-displayed-pages": 10,
            "page-size-dropdown-items": "10-25-50",
            "query-string-key-page-no": "p",
            "query-string-key-page-size": "s",
            "show-first-last": true,
            "show-prev-next": true,
            "show-page-size-nav": true,
            "show-total-pages": true,
            "show-total-records": true,
            "show-gap": true,
            "text-page-size": "",
            "text-first": "«",
            "text-last": "»",
            "text-previous": "‹",
            "text-next": "›",
            "text-total-pages": "pages",
            "text-total-records": "records",
            "sr-text-first": "First",
            "sr-text-last": "Last",
            "sr-text-previous": "Previous",
            "sr-text-next": "Next",
            "class": "row",
            "class-info-div": "col-2",
            "class-page-size-div": "col-1",
            "class-paging-control-div": "col-8",
            "class-paging-control": "pagination",
            "class-active-page": "active",
            "class-disabled-jumping-button": "disabled",
            "class-total-pages": "badge badge-light",
            "class-total-records": "badge badge-dark"
          }
        }
    }
}

More than one settings collection can be defined inside appSettings.json file, so each paging helper element can read settings from different collection.

it is not necessary to override all the settings inside json file, it is possible to mention only the settings we want to override.

e.g. below there is two settings collections "basic" and "custom", each can be applied to different set of paging helpers inside your application.


{
    "lazziya": {
        "pagingTagHelper": {
            "basic": {
                "show-first-last": true,
                "max-displayed-pages": 7,
                "class-active-aage": "disabled"
              },
              "custom": {
                "show-first-last": true,
                "show-prev-next": true,
                "show-gap": true,
                "max-displayed-pages": 2,
                "text-first": "go first",
                "text-last": "go last",
                "text-previous": "one step back",
                "text-next": "one step forward",
                "class-paging-control": "pagination pagination-lg"
              }
        }
    }
}

HTML Code


    <!-- basic settings -->
    <paging total-records="Model.TotalRecords"
            page-no="Model.PageNo"
            page-size="Model.PageSize"
            settings-json="basic">
    </paging>

    <!-- custom settings -->
    <paging total-records="Model.TotalRecords"
            page-no="Model.PageNo"
            page-size="Model.PageSize"
            settings-json="custom">
    </paging>

Result for "basic" settings

169 pages841 records

Result for "custom" settings

169 pages841 records

Go to page top