MVC 4 paging with Bootstrap Paging or without bootstrap also run that simplifies the rendering of Bootstrap Pagination component.
Paginator will have the Bootstrap Pagination Component rendered as shown in the following graph. Left most one is the go to first page item. The one next to it is the previous page item. The following numeric page items are of the type page. Next page item comes after it. Last page item will be the last one rendered.
Attribute | Type | Default | Description |
---|---|---|---|
PageSize | int | Number of items display in each page. | |
TotalItemCount | int | You can set total item count otherwise model itself total items get and set. | |
CurrentPage | int | It marks the current page. | |
ItemTexts |
You can change the text of the page items. Default text value set as a below.
ItemTexts = new ItemTexts() { First = "First", Previous = "«", Page = "" , Next = "»", Last = "Last" } |
||
ItemIcon | string |
You can add icon <i class="icon-chevron-right"></i>
with text. Default icon value null.
ItemIcon = new ItemIcon() { First = "icon-backward", Previous = "icon-chevron-left", Next = "icon-chevron-right", Last = "icon-forward" } |
|
TooltipTitles |
Tooltip text can be changed. Also set custom current page number position using
{0}, Default text value set as a below.
TooltipTitles = new TooltipTitles() { First = "Go to first page", Previous = "Go to previous page", Page = "{0}" , Next = "Go to next page", Last = "Go to last page" } |
||
Size | normal |
Controls the size of output pagination component. Accepts values:
mini, small, normal,
large. Those values maps the pagination sizing class
pagination-mini, pagination-small
and pagination-large in Bootstrap Pagination.
Size = Size.normal
|
|
Alignment | left |
Controls the alignment of the pagination component. It accepts values
left, center and right.
Those values maps to the alignment class pagination-centered
and pagination-right in Bootstrap Pagination.
Alignment = Alignment.left
|
|
CssClass | string | null |
Set custom css class.
CssClass = "green-round-theme"
|
IsShowControls | boolean | true | Set bool value for next and previous button |
IsShowFirstLast | boolean | false | Set bool value for first and last button |
IsShowPages | boolean | true | Set bool value for 1,2,3,4,5 Paging list. |
<div class="pagination pagination-normal pagination-centered"> <ul> <li class="first"><a href="/?page=1" title="Go To First Page">First</a></li> <li class="previous"><a href="/?page=1" title="Previous Page">Previous</a></li> <li><a href="/?page=1" title="Go to page 1.">P1</a></li> <li><a href="/?page=2" title="Go to page 2.">P2</a></li> <li class="active"><span>P3</span></li> <li><a href="/?page=3" title="Go to page 4.">P4</a></li> <li><a href="/?page=5" title="Go to page 5.">P5</a></li> <li class="next"><a href="/?page=3" title="Next page">Next</a></li> <li class="last"><a href="/?page=40" title="Go To Last Page">Last</a></li> </ul> </div>