Fork me on GitHub

MvcPager demo - Page navigation using Javascript API (AjaxPager)

This sample demonstrates using goToPage function of Javascript API to jump to a specified page in Ajax paging mode.

goToPage function from MvcPager Javascript API can enforce page index validation, if page index passed to goToPage function is not valid integer or is out of range (less that 1 or greater than total page count), the Javascript function that specified in the PagerOptions.OnPageIndexError property will be called to handle this error.

Before calling functions form Javascript API, you must add the jQuery library and use Html.RegisterMvcPagerScriptResource method to register the MvcPager jQuery plugin.

Go to page
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

View:

        
@model PagedList<Order>
<div class="well well-sm">
    <div class="input-group" style="width:35%">
        <span class="input-group-addon">Go to page </span>
        <input type="text" id="pagebox" class="form-control input-sm" />
        <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goBtn">Go</button></span>
    </div>
</div>
    <div id="orders">
        @Html.Partial("_OrderList", Model)
    </div>
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}
    <script type="text/javascript">
        $(function() {
            $("#goBtn").click(function () {
                var pager = Webdiyer.MvcPagers[0];
                if (pager != null) {
                    pager.goToPage($("#pagebox").val());
                }else{alert("Can not find the specified MvcPager!");}
            });
        });
    </script>
}

_OrderList.cshtml:

@model PagedList<Order>
        
@{ Html.RenderPartial("_DataTable"); }
<div class="text-center">
    @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>" }).AjaxOptions(a => a.SetUpdateTargetId("orders"))
</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 JavascriptApiAjax(int id = 1)
        {
            using (var db = new DataContext())
            {
                var model = db.Orders.OrderBy(o=>o.OrderId).ToPagedList(id, 5);
                if (Request.IsAjaxRequest())
                    return PartialView("_OrderList", model);
                return View(model);
            }
        }