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);
              }
            }

          }});
      });

在此您看到，我正在更新prev和下一个按钮的 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：

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

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

Jquery Ajax与Laravel分页

1 个答案: