Document

Intro

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

Documentation

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.

Options

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">
    <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>

CSS Theme

Theme

MVC 4 Paging