MVC 4 Paging


MVC 4 paging with Bootstrap Paging or without bootstrap also run that simplifies the rendering of Bootstrap Pagination component.


Structure Explained

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.

MVC 4 Paging


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.

HTML Structure

<div class="pagination pagination-normal pagination-centered">
        <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>

CSS Theme


nuget package

PM> Install-Package MVC4.Paging


  Demo Download