Hello,

I have implemented pagination in MVC application. when first time page loads, it binds paging number in the bottom, but 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*****************

1. $(".pager").click(function (evt) {
2. //alert(evt);
3. $(".loading").css("display", "inline");
4. var pageindex = $(evt.target).data("pageindex");
5. $("#CurrentPageIndex").val(pageindex);
6. var CurrentPageIndex = pageindex;
7. var PageCount = '@info.PageCount';
8. var PageSize = '@info.PageSize';
9. var SortDirection = '@info.SortDirection';
10. var SortField = '@info.SortField';
11. //evt.preventDefault();
12. //$("form").submit();
13. $.ajax({
14. url: '@Url.Action("JobsServiceProviderIC", "PostWork")',
15. type: "Post",
16. dataType: "json",
17. data: { CurrentPageIndex: CurrentPageIndex, PageCount: PageCount, PageSize: PageSize, SortDirection: SortDirection, SortField: SortField },
18. success: function (data) {
19. $(".loading").css("display", "none");
20. //alert(data.length);
21. $("#tblJobs > tbody").html("");
22. if (data.data.length > 0) {
23. for (var i = 0; i < data.data.length; i++) {
24. tr = $('<tr/>');
25. tr.append("" + data.data[i].JobTitle + "");
26. var SDate = new Date(eval('new' + data.data[i].StartDate.replace(/\//g, ' ')));
27. var formattedSDate = SDate.getMonth() + 1 + '/' + SDate.getDate() + '/' + SDate.getFullYear();
28. var EDate = new Date(eval('new' + data.data[i].EndDate.replace(/\//g, ' ')));
29. var formattedEDate = EDate.getMonth() + 1 + '/' + EDate.getDate() + '/' + EDate.getFullYear();
30. tr.append("View");
31. $('#tblJobs > tbody').append(tr);
32. }
33. tr = $('<tr/>');
34. tr1 = $("<td style='text-align:center;padding: 0px !important;' colspan='9'>");
35. tr2 = $("<ul class='pagination' style='margin: 10px 0;'>");
36. for (var i = 0; i < data.PageCount; i++) {
37. if (i == data.CurPageIndex) {
38. tr2.append("<li class='page-item active'><span class='page-link'>" + (parseInt(i) + 1) + "<span class='sr-only'>(current)</span></span>");
39. }
40. else {
41. tr2.append("<li><a href='' data-pageindex='" + parseInt(i) + "' class='pager'>" + (parseInt(i) + 1) + "</a>");
42. }
43. }
44. tr1.append(tr2);
45. tr.append(tr1);
46. tr.append("</ul></td>");
47. $('#tblJobs > tbody').append(tr);
48. }
49. else {
50. tr = $('<tr/>');
51. tr.append(" No Jobs Found.");
52. $('#tblJobs > tbody').append(tr);
53. return false;
54. }
55. },
56. error: function (jqXHR, textStatus, errorThrown) {
57. $(".loading").css("display", "none");
58. }
59. });
60. return false;
61. });
62.