PaginationTaghelper

Current Version: 1.2.0

Requirement

.NetStandard 1.6 or above

Installation

From Package-Manager Install-Package PaginationTaghelper
From .NET-CLI dotnet add package PaginationTaghelper

How To Use It

Add @addTagHelper PaginationTagHelper.*,PaginationTagHelper to your import _ViewImports.cshtml
Add pagination tag in your view

<pagination></pagination>

And add attributes to tag

These attributes are must to be added

Attributes	Descriptions
total-items	Your total items number
item-per-page	Show the number of items in your each page
current-page	Your current page of number, it's controled by your controller
page-action	Your current view's action
page-controller	Your current view's controller,not necessary when you use page-action attribute

For Examlpe:

<pagination total-items="@Model.TotalItems"
            item-per-page="@Model.ItemPerPage"
            current-page="@Model.Page"
            page-action="PageWithoutQuery"
            page-controller="Home">
</pagination>

Optional attributes

Change your tags

Attributes	Descriptions
tag-pagination	Change you pagination tag,the default is nav
tag-page-group	Change you page list group tag,the default is ul
tag-page-list	Change you page list item tag,the default is li
tag-page-link	Change you list item's link tag,the default is a
tag-page-icon	Change you link icon tag,the default is span

Change your paging list attributes

Intruduction

Attribute property are all start with attrs-page-*.
The attribute's contents are all use json format.

For Example

You want to add class="form-control" to all page link the html will be like this:

attrs-page-link="{
  class:'form-control'
}"

You can also use "*" to do the number of sequence in your attribute.

For example:

attrs-page-list="{
  Id:'agelink*'
}"

Will generate list id like this...

<li id="pagelink1></li>
<li id="pagelink2></li>
<li id="pagelink3></li>
<li id="pagelink4></li>
<li id="pagelink5></li>
<li id="pagelink6></li>

note: the "*" is only use in the paging list,not for single button or link.

Attributes	Descriptions
attrs-page-group	Add attributes to your page-group list,the default has attribute class="pagination"
attrs-page-list	Add attributes to you page list item,the default is empty
attrs-page-link	Add attributes to your page list item,the default has aria-label="your page number"
attrs-page-icon	Add attributes to your list item's icon,the default is aria-hidden="true"

Under the code will show what tags will be changed with attributes.

<ul> --> attrs-page-group will add attributes to this tag
  <li> --> attrs-page-list will add attributes to this tag
    <a href="pagelinks"> --> attrs-page-link will add attributes to this tag
      <span></span> --> attrs-page-icon will add attributes to this tag
    </a>
  <li>
</ul>

Add attribute your first page button

Attributes	Descriptions
attrs-page-first	Add attributes to your first page button
attrs-page-first-link	Add attributes to you first page button link
attrs-page-first-icon	Add attributes to your first page button icon

Add attribute your last page button

Attributes	Descriptions
attrs-page-last	Add attributes to your last page button
attrs-page-last-link	Add attributes to you last page button link
attrs-page-last-icon	Add attributes to your last page button icon

Add attribute your previous page button

Attributes	Descriptions
attrs-page-previous	Add attributes to your previous page button
attrs-page-previous-link	Add attributes to you previous page button link
attrs-page-previous-icon	Add attributes to your previous page button icon

Add attribute your next page button

Attributes	Descriptions
attrs-page-next	Add attributes to your next page button
attrs-page-next-link	Add attributes to you next page button link
attrs-page-next-icon	Add attributes to your next page button icon

Add attribute your between page icon

Attributes	Descriptions
attrs-page-between	Add attributes to your betweeb page button
attrs-page-between-icon	Add attributes to you between page button icon

Other optional properties

Attributes	Descriptions
page-active-class	Your current page active class,for bootstrap pagination is "active".other type pagination might be "current" or somethings,the default is active
page-disable-class	Your current page disabled class,for bootstrap pagination is "disabled".other type pagination might be empty or somethings,the default is disabled
page-middle-length	Show page length with current page left and right,for example PageMiddleLength is 2 and current page is 7 then it will show 5 6 7 8 9 pages ,the default value is 2
page-top-bottom-length	Show page length with bottom page and top page length,for example PageTopBottomLength is 5 and current page is 1 then it will show 1 2 3 4 5 pages ,the default value is 5
page-previous-icon	Show Previous Icon,It can be « or any string,the default is Previous
page-next-icon	Show Next Icon,It can be » or any string,the default is Next
page-first-icon	Show First Icon,It can be first number 1 or any string,the default is First
page-last-icon	Show Last Icon,It can be last number or any string,the default is Last
page-show-first	Show first page button or not,the default is true
page-show-last	Show Last page button or not, the default is true
page-between-icon	Show Between Icon,It can be ~ or any string,the default is ...
page-show-between	Show between page dot ... or not,the default is true
page-swap-previous-first-btn	Exchange previous page button and first page button,the default is false
page-swap-next-last-btn	Exchange next page button and last page button,the default is false

Custom Query attribute

Attribute	Description
current-page-parameter	Add any strings what you want to use in your current page parameter,the default is page
page-qery-options	Add json format string to your query parameter, It can be direct used json string in your razor view or serialize your query from the controller.For more detail please see my examlpe