Paging TagHelper Attributes
By Ziya Mollamahmut
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
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
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
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
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
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
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>