Paging TagHelper Attributes

By Ziya Mollamahmut

• Required attributes
• Optional attributes
  • General settings attributes
  • Query string attributes
  • Display attributes
  • Text attributes
  • Texts for screen readers
  • Styling 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>