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論壇上。