AJAX вызов предотвращение разбиения на страницы

---

Привет,

Я реализовал разбиение на страницы в приложении MVC. когда страница загружается в первый раз, она работает правильно, когда я нажимаю на подкачку, то она делает вызов AJAX и связывает данные в моей HTML-таблице из ответа json. но после вызова AJAX пагинация не работает, и перезагрузите страницу и данные снова и сбросьте пагинацию на страницу номер 1.

как только вызов AJAX срабатывает, то пагинация не работает.

<table class="table table-striped" id="tblJobs">
    <thead> <tr> <th>Job Title</th> <th>Start Date</th> <th>Completion Date</th> <th>View Details</th> </tr> </thead>
    <tbody>
        @if (@Model.JobsList != null)
        {
            foreach (var item in @Model.JobsList)
            {
                <tr> <td>@item.JobTitle</td> <td>@item.StartDate.ToString().Split(' ')[0]</td> <td>@item.EndDate.ToString().Split(' ')[0]</td> <td><a type="button" href="@Url.Action("jobdetails", "PostWork", new { id = @item.PostworkId })" class="btn btn-default fixit-btn">View</a></td> </tr>
            }
            <tr>
                <td style="text-align:center;padding: 0px !important;" colspan="9">
                    <ul class="pagination" style="margin: 10px 0;">
                        @for (var i = 0; i < info.PageCount; i++)

                        {

                            if (i == info.CurrentPageIndex)

                            {

                                <li class="page-item active">
                                    <span class="page-link">
                                        @(i + 1)
                                        <span class="sr-only">(current)</span>
                                    </span>
                                    }
                                    else
                                    {
                                <li>
                                    <a href="" data-pageindex="@i" class="pager">@(i + 1)</a>
                                    }
                                    }
                            </ul>
                        </td>
                    </tr>
                            }
                            else
                            {
                                <tr>
                                    <td style="text-align:center;" colspan="9">
                                        Currently No Jobs Posted.
                                    </td>
                                </tr>
                            }
</tbody>
</table>

********* Javacript/Jquery*****************

$(".pager").click(function (evt) {
       //alert(evt);
       $(".loading").css("display", "inline");
       var pageindex = $(evt.target).data("pageindex");
       $("#CurrentPageIndex").val(pageindex);
       var CurrentPageIndex = pageindex;
       var PageCount = '@info.PageCount';
       var PageSize = '@info.PageSize';
       var SortDirection = '@info.SortDirection';
       var SortField = '@info.SortField';
       //evt.preventDefault();
       //$("form").submit();
       $.ajax({
           url: '@Url.Action("JobsServiceProviderIC", "PostWork")',
           type: "Post",
           dataType: "json",
           data: { CurrentPageIndex: CurrentPageIndex, PageCount: PageCount, PageSize: PageSize, SortDirection: SortDirection, SortField: SortField },
           success: function (data) {
               $(".loading").css("display", "none");
               //alert(data.length);
               $("#tblJobs > tbody").html("");
               if (data.data.length > 0) {
                   for (var i = 0; i < data.data.length; i++) {
                       tr = $('<tr/>');
                       tr.append("" + data.data[i].JobTitle + "");
                       var SDate = new Date(eval('new' + data.data[i].StartDate.replace(/\//g, ' ')));
                       var formattedSDate = SDate.getMonth() + 1 + '/' + SDate.getDate() + '/' + SDate.getFullYear();
                       var EDate = new Date(eval('new' + data.data[i].EndDate.replace(/\//g, ' ')));
                       var formattedEDate = EDate.getMonth() + 1 + '/' + EDate.getDate() + '/' + EDate.getFullYear();
                       tr.append("View");
                       $('#tblJobs > tbody').append(tr);
                   }
                   tr = $('<tr/>');
                   tr1 = $("<td style='text-align:center;padding: 0px !important;' colspan='9'>");
                   tr2 = $("<ul class='pagination' style='margin: 10px 0;'>");
                   for (var i = 0; i < data.PageCount; i++) {
                       if (i == data.CurPageIndex) {
                           tr2.append("<li class='page-item active'><span class='page-link'>" + (parseInt(i) + 1) + "<span class='sr-only'>(current)</span></span>");
                       }
                       else {
                           tr2.append("<li><a href='' data-pageindex='" + parseInt(i) + "' class='pager'>" + (parseInt(i) + 1) + "</a>");
                       }
                   }
                   tr1.append(tr2);
                   tr.append(tr1);
                   tr.append("</ul></td>");
                   $('#tblJobs > tbody').append(tr);
               }
               else {
                   tr = $('<tr/>');
                   tr.append(" No Jobs Found.");
                   $('#tblJobs > tbody').append(tr);
                   return false;
               }
           },
           error: function (jqXHR, textStatus, errorThrown) {
               $(".loading").css("display", "none");
           }
       });
       return false;
   });

Спасибо,
Krunal

Что я уже пробовал:

Я попытался создать другую функцию и вызвать ее из номеров подкачки, как только сработает вызов AJAX.
проверьте с помощью preventdefault.

[правка: добавлено в блок кода]

---