Pulse7
7/16/2017 - 4:59 PM

X.PagedList with ajax

X.PagedList with ajax

@model IPagedList<RestaurantViewModel>

<div id="restaurantList">

    <div class="pagedList" data-otf-target="#restaurantList">
        @Html.PagedListPager(Model, page=>Url.Action("Index",new { page= page }), PagedListRenderOptions.MinimalWithItemCountText)
    </div>

    @foreach (var item in Model)
    {
        <div class="well-sm ">
            <h4>@item.Name</h4>
            <div>@item.City, @item.Country</div>
            <p>Reviews:@item.NumReviews</p>
            <hr />
        </div>
    }
</div>
var getPage = function () {
        var $a = $(this);

        var options = {
            url: $a.attr("href"),
            data:$("form").serialize(),
            get: "get"
        };

        $.ajax(options).done(function (data) {
            var target = $a.parents("div.pagedList").attr("data-otf-target");
            $(target).replaceWith(data);
        });
        return false;
    }

$(".body-content").on("click", ".pagedList a", getPage);
<div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>