Paging TagHelper v3.1

Sample : Cultures Table

Culture Id English name Native name Two letter ISO language name
4096 Afar Qafar aa
4096 Afar (Djibouti) Qafar (Yabuuti) aa
4096 Afar (Eritrea) Qafar (Eretria) aa
4096 Afar (Ethiopia) Qafar (Otobbia) aa
54 Afrikaans Afrikaans af
4096 Afrikaans (Namibia) Afrikaans (Namibië) af
1078 Afrikaans (South Africa) Afrikaans (Suid-Afrika) af
4096 Aghem Aghem agq
4096 Aghem (Cameroon) Aghem (Kàmàlûŋ) agq
4096 Akan Akan ak
4096 Akan (Ghana) Akan (Gaana) ak
28 Albanian shqip sq
1052 Albanian (Albania) shqip (Shqipëri) sq
4096 Albanian (Kosovo) shqip (Kosovë) sq
4096 Albanian (Macedonia, FYRO) shqip (Republika e Maqedonisë) sq
1156 Alsatian (France) Elsässisch (Frànkrisch) gsw
94 Amharic አማርኛ am
1118 Amharic (Ethiopia) አማርኛ (ኢትዮጵያ) am
1 Arabic العربية ar
5121 Arabic (Algeria) العربية (الجزائر) ar
15361 Arabic (Bahrain) العربية (البحرين) ar
4096 Arabic (Chad) العربية (تشاد) ar
4096 Arabic (Comoros) العربية (جزر القمر) ar
4096 Arabic (Djibouti) العربية (جيبوتي) ar
3073 Arabic (Egypt) العربية (مصر) ar
4096 Arabic (Eritrea) العربية (إريتريا) ar
2049 Arabic (Iraq) العربية (العراق) ar
4096 Arabic (Israel) العربية (إسرائيل) ar
11265 Arabic (Jordan) العربية (الأردن) ar
13313 Arabic (Kuwait) العربية (الكويت) ar
12289 Arabic (Lebanon) العربية (لبنان) ar
4097 Arabic (Libya) العربية (ليبيا) ar
4096 Arabic (Mauritania) العربية (موريتانيا) ar
6145 Arabic (Morocco) العربية (المملكة المغربية) ar
8193 Arabic (Oman) العربية (عمان) ar
4096 Arabic (Palestinian Authority) العربية (السلطة الفلسطينية) ar
16385 Arabic (Qatar) العربية (قطر) ar
1025 Arabic (Saudi Arabia) العربية (المملكة العربية السعودية) ar
4096 Arabic (Somalia) العربية (الصومال) ar
4096 Arabic (South Sudan) العربية (جنوب السودان) ar
4096 Arabic (Sudan) العربية (السودان) ar
10241 Arabic (Syria) العربية (سوريا) ar
7169 Arabic (Tunisia) العربية (تونس) ar
14337 Arabic (United Arab Emirates) العربية (الإمارات العربية المتحدة) ar
4096 Arabic (World) العربية (العالم) ar
9217 Arabic (Yemen) العربية (اليمن) ar
43 Armenian Հայերեն hy
1067 Armenian (Armenia) Հայերեն (Հայաստան) hy
77 Assamese অসমীয়া as
1101 Assamese (India) অসমীয়া (ভাৰত) as

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

Turn off all extras

Show/Hide Previous and Next buttons

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-first-numbered-page="false"
            show-last-numbered-page="false">
    </paging>
Result

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

Gap Size

  • gap-size: The difference of pages between first page and first displayed page. Or, the amount of pages between last page (total pages) and last displayed page.
    If the difference is larger than the gap size then the most first/last page will be displayed with "..." (three dots) before or after.
    e.g.: 1 ... 4 5 [6] 7 8 ... 100
HTML Code

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

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-nav-block-size : The block size for the dropdown items.
  • page-size-nav-max-items : How many items to display in the dropdown.
HTML Code

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

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

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

  • class-info-div :

    The div that contains the info badges for total pages/total records.
    Default: "col-2"

  • class-page-size-div :

    The div that contains page size dropdown control and its label.
    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-8"
            class-info-div="col-2"
            class-page-size-div="col-2"
            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>

Custom Labels

All labels except page numbers can be customized as below:

  • text-first : Label for "goto first page" button

    default: "&laquo;" ( « )

  • text-last : Label for "goto last page" button

    default: "&raquo;" ( » )

  • 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>

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,
            "gap-size": 3,
            "page-size-nav-block-size": 10,
            "page-size-nav-max-items": 5,
            "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-first-numbered-page": true,
            "show-last-numbered-page": true,
            "text-page-size": "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-2",
            "class-paging-control-div": "col-8",
            "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"
          }
        }
    }
}

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-first-numbered-page": true,
                "show-last-numbered-page": 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
Result for "custom" settings