Jquery Ajax 无法与 Laravel 分页一起正常工作答案

【问题标题】：Jquery Ajax isn't working properly with Laravel PaginationJquery Ajax 无法与 Laravel 分页一起正常工作
【发布时间】：2017-11-21 21:21:32
【问题描述】：

我正在尝试使用 ajax 和 laravel 分页从数据库表中加载记录

这是我的用户界面

显示分页按钮的代码

<div class="pull-right" id="inboxcount">

    <div class="btn-group">
         <button type="button" class="btn btn-default btn-sm" data-url=" " id="inbox_prev_page_url"><i class="fa fa-chevron-left"></i></button>
         <button type="button" class="btn btn-default btn-sm" data-url=" " id="inbox_next_page_url"><i class="fa fa-chevron-right"></i></button>
    </div>
</div>

在页面加载时，我正在使用 ajax 从表中获取数据，目前我为 2 条记录保留了分页，以便于理解。

页面加载时第一次加载记录的Ajax代码

$(document).ready(function() 
    {
      $.ajax({
          url: "http://localhost/sanimailer/public/get-inbox/2",
          dataType: "json",
          type:"get",
          async: true,
          success: function(data) 
          {
            if(data!='NULL')
            {
              console.log(data);

              $("[id=inboxcount]").prepend(data['from'] + ' - ' + data['to'] + ' / ' + data['total']);
              $("[id=inbox_prev_page_url]").attr("data-url",data['prev_page_url']);
              $("[id=inbox_next_page_url]").attr("data-url",data['next_page_url']);

              for (var i=0; i<data['data'].length; i++) 
              {
                  var fromName = data['data'][i].fromName;
                  var fromAddress = data['data'][i].fromAddress;
                  var subject = (data['data'][i].subject).substr(0,50); 
                  var date = data['data'][i].date;


                  var row = $('<tr><td><input type=checkbox></td><td class=mailbox-star><a href=#><i class=fa fa-star text-yellow></i></a></td><td class=mailbox-name><a href=# title='+ fromAddress + '>' + fromName + '</a></td><td class=mailbox-subject>' + subject + '</td><td class=mailbox-attachment><i class=fa fa-paperclip></i></td><td class=mailbox-date>' + date + '</td></tr>');

                  $("#inboxtable").append(row);
              }
            }

          }});

});

加载后的结果如上图所示。在这里你可以看到我已经更新了两个按钮的 data-url 属性

现在如果我点击下一个按钮下一个数据被加载，这里是下一个按钮点击事件的 ajax 代码

$("[id=inbox_next_page_url]").click(function(){

        var url=$("[id=inbox_next_page_url]").data("url");

        $.ajax({
          url:url,
          dataType: "json",
          type:"get",
          async: true,
          success: function(data) 
          {
            if(data!='NULL')
            {

              console.log(data);
              // $("#inboxtable").empty();
              $("[id=inbox_prev_page_url]").attr("data-url","");
              $("[id=inbox_next_page_url]").attr("data-url","");


              $("[id=inboxcount]").prepend(data['from'] + ' - ' + data['to'] + ' / ' + data['total']);
              $("[id=inbox_prev_page_url]").attr("data-url",data['prev_page_url']);
              $("[id=inbox_next_page_url]").attr("data-url",data['next_page_url']);

              alert($("[id=inbox_next_page_url]").attr("data-url"));

              for (var i=0; i<data['data'].length; i++) 
              {
                  var fromName = data['data'][i].fromName;
                  var fromAddress = data['data'][i].fromAddress;
                  var subject = (data['data'][i].subject).substr(0,50); 
                  var date = data['data'][i].date;


                  var row = $('<tr><td><input type=checkbox></td><td class=mailbox-star><a href=#><i class=fa fa-star text-yellow></i></a></td><td class=mailbox-name><a href=# title='+ fromAddress + '>' + fromName + '</a></td><td class=mailbox-subject>' + subject + '</td><td class=mailbox-attachment><i class=fa fa-paperclip></i></td><td class=mailbox-date>' + date + '</td></tr>');


                  $("#inboxtable").append(row);
              }
            }

          }});
      });

你看，我正在更新 prev 和 next 按钮的 data-url 属性。当我检查代码时，我看到 data-url 为下一个按钮更新，但是当我点击下一个当前 data-url 它总是显示，实际上它应该在 data-url 中显示更新的值 但它显示相同的数据，因此我无法加载更多记录。

控制台数据

检查这个

不知道为什么分页没有进一步进行

【问题讨论】：

标签： php jquery ajax laravel-5 pagination

【解决方案1】：

分页没有进行的原因是，当您在下一次单击按钮时使用.data('url') 时，jQuery 会不断获取其内部缓存版本的 url 数据属性。要始终从 DOM 中获取最新的当前属性，请使用 .attr('data-url')。

所以换行：

var url = $("[id=inbox_next_page_url]").data("url");

到

var url=$("[id=inbox_next_page_url]").attr("data-url");

你的代码就可以工作了。

来自.data()jQuery docs：

data-属性在data属性第一次被拉取被访问，然后不再被访问或变异（所有数据值然后存储在 jQuery 内部）。

这里是 jQuery 论坛上的 a related post。

【讨论】：