MvcPager demo - Multiple AjaxPagers

View:

@model Tuple<PagedList<Order>,PagedList<Order>,PagedList<Order>>
<div id="orders">
    @Html.Partial("_AjaxData1", Model.Item1)
</div>
<hr />
<div id="orders2">
    @Html.Partial("_AjaxData2", Model.Item2)
</div>
<hr />
<div id="orders3">
    @Html.Partial("_AjaxData3", Model.Item3)
</div>
@section scripts{@{Html.RegisterMvcPagerScriptResource();}}

_AjaxData1.cshtml:

@model PagedList<Order>
    @{ Html.RenderPartial("_DataTable"); }
<div class="row">
    <div class="col-xs-8">
        @Ajax.Pager(Model, new PagerOptions { FirstPageText = "<<", LastPageText = ">>", NextPageText = ">", PrevPageText = "<", PageIndexParameterName = "id", NumericPagerItemCount = 5, 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>", PageIndexBoxId = "pageIndexBox" }).Options(o => o.AddRouteValue("target", "orders")).AjaxOptions(a => a.SetUpdateTargetId("orders"))
    </div>
    <div class="col-xs-4">
        <div class="input-group" style="margin:20px 0">
            <span class="input-group-addon">Go to page</span>
            <select id="pageIndexBox" class="form-control input-sm"></select>
        </div>
    </div>
</div>

_AjaxData2.cshtml:

@model PagedList<Order>
   @{ Html.RenderPartial("_DataTable"); }
<div class="row">
    <div class="col-xs-8">
        @Ajax.Pager(Model, new PagerOptions { FirstPageText = "<<", LastPageText = ">>", NextPageText = ">", PrevPageText = "<", ContainerTagName = "ul", NumericPagerItemCount = 5, CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>", PageIndexBoxId = "pageIndexBox2", GoToButtonId = "goToBtn2" }).Options(o => o.AddRouteValue("target", "orders2")).AjaxOptions(a => a.SetUpdateTargetId("orders2"))
    </div>
    <div class="col-xs-4">
        <div class="input-group" style="margin:20px 0">
            <span class="input-group-addon">Go to page</span>
            <input type="text" id="pageIndexBox2" class="form-control input-sm"/>
            <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn2">Go</button></span>
        </div>
    </div>
</div>

_AjaxData3.cshtml:

@model PagedList<Order>
   @{ Html.RenderPartial("_DataTable"); }
<div class="row">
    <div class="col-xs-8">
        @Ajax.Pager(Model, new PagerOptions { FirstPageText = "<<", LastPageText = ">>", NextPageText = ">", PrevPageText = "<", PageIndexParameterName = "page", NumericPagerItemCount = 5, 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>", PageIndexBoxId = "pageIndexBox3", GoToButtonId = "goToBtn3" }).Options(o => o.AddRouteValue("target", "orders3")).AjaxOptions(a => a.SetUpdateTargetId("orders3"))
    </div>
    <div class="col-xs-4">
        <div class="input-group" style="margin:20px 0">
            <span class="input-group-addon">Go to page</span>
            <select id="pageIndexBox3" class="form-control input-sm"></select>
            <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn3">Go</button></span>
        </div>
    </div>
</div>

_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 ActionResult AjaxPagers(int id = 1, int pageIndex = 1, int page = 1)
        {
            using (var db = new DataContext())
            {
                const int pageSize = 5;
                if (Request.IsAjaxRequest())
                {
                    var target = Request.QueryString["target"];
                    if (target == "orders")
                    {
                        return PartialView("_AjaxData1",
                            db.Orders.OrderBy(o=>o.OrderId).ToPagedList(id, pageSize));
                    }
                    if (target == "orders2")
                    {
                        return PartialView("_AjaxData2",
                            db.Orders.OrderBy(o=>o.OrderId).ToPagedList(pageIndex, pageSize));
                    }
                    return PartialView("_AjaxData3",
                        db.Orders.OrderBy(o=>o.OrderId).ToPagedList(page, pageSize));
                }
                var model = new Tuple<PagedList<Order>,PagedList<Order>,PagedList<Order>>(
                    db.Orders.OrderBy(o=>o.OrderId).ToPagedList(id, pageSize),db.Orders.OrderBy(o=>o.OrderId).ToPagedList(pageIndex, pageSize),db.Orders.OrderBy(o=>o.OrderId).ToPagedList(page, pageSize));
                return View(model);
            }
        }