jQuery的阿贾克斯不与分页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条记录保留了分页，以便于理解。当页面被加载

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

      }}); 

}); 

后装载结果在上述的图像显示

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

      }}); 
     }); 

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

控制台数据

检查这个

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

Answer 1

分页没有进展的原因是因为jQuery内部保持其取当您在下一个按钮点击时使用.data('url')时，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-用属性在该数据属性 访问，然后不再访问或突变的第一次拉动（所有数据值 然后在jQuery的内部存储）。

而这里的a related post在jQuery论坛上。