Click here to Skip to main content
14,827,034 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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.
HTML
<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*****************

JavaScript
$(".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]
Posted
Updated 16-Feb-17 18:01pm
v13
Comments
F-ES Sitecore 16-Feb-17 8:17am
   
People can't help you with your code if they can't see it.
kkakadiya 16-Feb-17 8:21am
   
Sorry,
Code has been uploaded.
Karthik_Mahalingam 16-Feb-17 22:30pm
   
Always use  Reply  button, to post Comments/query to the user, so that the user gets notified and responds to your text.

Quote:
$(".pager").click(function (evt) {

That hooks up an event handler to the "click" event of any elements with class="pager" which already exist when this code executes.

But when you load a new page of data, you're replacing the entire contents of the table, including all of the class="pager" elements.

The new class="pager" elements will not have the event handler hooked up, because they did not exist when you called $(".pager").click(...

To fix the problem, you need to use a delegated event handler[^] attached to a parent element which will not be replaced.
JavaScript
$("#tblJobs").on("click", ".pager", function(evt){
   // Event handler code unchanged...
});
   
Hello Richard,

Bang on.Thanks for the answer. it worked for me. I definitely know that it seems some issue with my binding but don't know. This issue ruined my entire day.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900