ASP.Net Core how to add ajax pagination?

Question

index.cshtml:

@model X.PagedList.IPagedList<Employees.Models.Employee>
@using X.PagedList.Mvc.Core;

<table class="table" id="Table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Ageth>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Name</td>
                <td>@item.Age</td>
            </tr>
        }
    </tbody>
</table>

<div class="pagination">
    Страница @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) из @Model.PageCount

    @Html.PagedListPager(Model, page => Url.Action("Index", new { page }))
</div>

HomeController:

public IActionResult Index(int? page)
        {
            int pageSize = 3;
            int pageNumber = (page ?? 1);
            return View(employeeRepository.GetEmployees().ToPagedList(pageNumber, pageSize));
        }

Pagination works but i need to use it without restart my page(with ajax). How can i do it? Maybe i need move my table to PartialView page? Any advices pls!

Answer 1

You can solve it adding a partial view and few conditions, plus a small JS code. I will write a basic implementation, you can extend it to avoid load the entire table.

1. Partial View (_EmployeesTable.cshtml)

@using X.PagedList;
@using X.PagedList.Mvc.Core
@model IPagedList<WebApplication1.Controllers.EmployeeModel>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var i in Model)
        {
            <tr>
                <td>@i.Name</td>
                <td>@i.Age</td>
            </tr>
        }
    </tbody>
</table>

<div class="pagination">
    Страница @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) из @Model.PageCount

    @Html.PagedListPager(Model, page => Url.Action("Index", "Employee", new { page }))
</div>

2. The default view (Index.cshtml, where the table will be rendered)

...
<div id="table1">
    <partial name="_EmployeesTable" model="@Model"/>
</div>


@section Scripts{
    <script>
        $(function() {
            function interceptPaging() {
                $("#table1 .pagination a").click(function(event) {
                    event.preventDefault();

                    $.get($(this).attr("href"),
                        function(d) {
                            $("#table1").html(d);
                            interceptPaging();
                        });
                });
            }

            interceptPaging();
        });
    </script>
}
...

3. The action (Index)

...
public IActionResult Index(int? page)
{
    var items = employeeRepository.GetEmployees().ToPagedList(page ?? 1, 3);
    var isAjax = Request.Headers["X-Requested-With"] == "XMLHttpRequest";
    if (isAjax)
    {
        return PartialView("_EmployeesTable", items);
    }
    return View(items);
}
...