AJAX调用阻止分页 [英] AJAX call preventing pagination

问题描述

你好，



我在MVC应用程序中实现了分页。当第一次加载页面时，它正常工作，当我点击分页然后它进行AJAX调用并从json响应中绑定我的HTML表中的数据。但是在AJAX调用之后，分页不起作用并重新加载页面和数据并将分页重置为页码1.



一旦AJAX调用触发，则分页不起作用。

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.

<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 ** ***************

*********Javacript/Jquery*****************

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

谢谢，

Krunal



我尝试了什么：



我试过创建另一个函数并调用它一旦AJAX调用触发，就会从分页号码开始。

用preventdefault检查。

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]

推荐答案

（ .pager）。click（ function （evt）{
// alert（evt） ）;

(".pager").click(function (evt) { //alert(evt);

（ .loading ）.css（ display， inline）;
var pageindex =

(".loading").css("display", "inline"); var pageindex =

（evt.target）.data（ pageindex）;

(evt.target).data("pageindex");

这篇关于AJAX调用阻止分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！