AJAX call preventing pagination

See more:

C#

ASP.NET

Ajax

JSON

MVC4

paging

Hello,

I have implemented pagination in MVC application. when first time page loads, it works properly, when I click on paging then it makes AJAX call and bind the data in my HTML table from json response. but after AJAX call, pagination is not working and reload the page and data again and reset pagination to Page number 1.

once AJAX call fires, then pagination is not working.

<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;
   });

Thanks,
Krunal

What I have tried:

I have tried with creating another function and call it from paging numbers once AJAX call fires.
check with preventdefault.

[edit: Added in code block]