Member Avatar for 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

  • 2 Contributors
  • 1 Reply
  • 807 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by The Diamonds
Member Avatar for 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);
Edited by The Diamonds
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.