jquery pagination not working

[Krunal_3]

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 working.

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>

Javascript code

$(".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("");
$('#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

[The Diamonds]

Hi,

After first '.pager' click, you're deleting all table contents including '.pager' elements which have event 'click' registered to it, then you're creating new '.pager' elements.

Remeber that "$(".pager").click(function (evt) {" registers the 'click' event first time the page loads and won't work on elements that will be created later on.

To fix that, I'd suggest that you create a seperate function and register 'click' event every time you create new '.pager' element.

Something like:

function pagerFnc(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("");
$('#tblJobs > tbody').append(tr);
$(".pager").click(pagerFnc);
}
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;
}
$(".pager").click(pagerFnc);