Fork me on GitHub

MvcPager demo - Load by Ajax

This sample demonstrates how to load MvcPager dynamically via Ajax call.

When loading MvcPager via Ajax call, you need to load and initialize MvcPager jQuery plugin dynamically by using Ajax.LoadMvcPagerScript() method.

View:

        
@model PagedList<Order>
<button id="loadbtn">Click here to load MvcPager and data</button>
<div id="orders">
</div>
@section scripts
{
    <script type="text/javascript">
        $(function () {
            $("#loadbtn").click(function () {
                $("#orders").load(location.href);
                $(this).hide();
            });
        });
    </script>
}

_LoadByAjax.cshtml

@model PagedList<Order>
@{ Html.RenderPartial("_DataTable"); }
    @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 { UpdateTargetId = "orders" })
<script type="text/javascript">
    $(function () {
        @{ Ajax.LoadMvcPagerScript(); }
    });
</script>

_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 LoadByAjax(int id = 1)
        {
            using (var db = new DataContext())
            {
                var model = db.Orders.OrderBy(o=>o.OrderId).ToPagedList(id, 5);
                if (Request.IsAjaxRequest())
                {
                    return PartialView("_LoadByAjax", model);
                }
                return View();
            }
        }