Fork me on GitHub

MvcPager demo - Combined mode

This sample demonstrates how to use AjaxPager and HtmlPager on a single page to add paging functionality for the same data.

MvcPager's Ajax partial loading feature makes it easy to switch between Ajax paging mode and url paging mode. The first MvcPager in this sample is using standard url paging, while the second MvcPager is in Ajax paging mode with Ajax partial loading feature enabled.

Order ID Customer ID Company Name Employee Name
10760 MAISD Maison Dewey Margaret Peacock
10761 RATTC Rattlesnake Canyon Grocery Steven Buchanan
10762 FOLKO Folk och fä HB Janet Leverling
10763 FOLIG Folies gourmandes Janet Leverling
10764 ERNSH Ernst Handel Michael Suyama
Standard url paging:
Ajax partial loading:

View:

        
@model PagedList<Order>
<div id="orders">
 @Html.Partial("_DataTable", Model)
<h5>Standard url paging:</h5>
@Html.Pager(Model,new PagerOptions { PageIndexParameterName = "id", ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>"})
    <h5>Ajax partial loading:</h5>
@Ajax.Pager(Model,new PagerOptions{PageIndexParameterName = "id",ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>"},new MvcAjaxOptions{EnablePartialLoading = true,UpdateTargetId="orders"})
</div>
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

_DataTable.cshtml:

@model PagedList<order>
<table class="table table-striped table-bordered">
    <tr>
    <th class="nowrap">
            @Html.DisplayNameFor(model => model.OrderId)
        </th>
    <th class="nowrap">
            @Html.DisplayNameFor(model => model.CustomerId)
        </th>
    <th class="nowrap">
            @Html.DisplayNameFor(model => model.CompanyName)
        </th>
    <th class="nowrap">
            @Html.DisplayNameFor(model => model.EmployeeName)
        </th>
    </tr>
    @foreach (var item in Model)
    {
    <tr>
    <td>
                @Html.DisplayFor(modelItem => item.OrderId)
            </td>
    <td>
                @Html.DisplayFor(modelItem => item.CustomerId)
            </td>
    <td>
                @Html.DisplayFor(modelItem => item.CompanyName)
            </td>
    <td>
                @Html.DisplayFor(modelItem => item.EmployeeName)
            </td>
        </tr>
    }
</table>

Model:

    public class Order
    {
        [Display(Name = "Order ID")]
        public int OrderId { get; set; }
        [Display(Name = "Customer ID"),StringLength(20)]
        public string CustomerId { get; set; }
        [Display(Name = "Order Date")]
        public DateTime OrderDate { get; set; }
        [Display(Name = "Company Name"), StringLength(20)]
        public string CompanyName { get; set; }
        [Display(Name = "Employee Name"), StringLength(20)]
        public string EmployeeName { get; set; }
    }

Controller:

        
        public ViewResult CombinedMode(int id = 1)
        {
            using (var db = new DataContext())
            {
                return View(db.Orders.OrderBy(o=>o.OrderId).ToPagedList(id, 5));
            }
        }