0

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

2
Contributors
1
Reply
14
Views
6 Months
Discussion Span
Last Post by The Diamonds
0

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

Edited by The Diamonds

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.