php - Jquery Ajax 无法与 Laravel 分页正常工作

Question

我正在尝试使用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);
              }
            }

          }});
      }); 

在这里您可以看到，我正在更新上一个和下一个按钮的 data-url 属性。 当我检查代码时，我看到 data-url 已更新为下一个按钮，但是当我单击下一个时，当前的 data-url 它始终显示，实际上它应该在 data-url 中显示更新的值 但它显示相同的数据，因此我无法加载更多记录。

控制台数据

检查这个

不确定为什么分页没有进一步进行

Answer 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 :

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

这是a related post在 jQuery 论坛上。