2017-10-16 120 views
0

我使用ASP.NET。如何用ajax做無限滾動?

我想在我的頁面上顯示我的數據庫文章和評論。我可以用一個函數顯示他們。但我想添加無限滾動屬性。當用戶滾動頁面時,頁面應該重新加載並繼續。你知道我喜歡Facebook,Twitter。

我該怎麼做?這是我的代碼在頁面上顯示數據。我在JQuery中搜索scroll函數,但我沒有一起做這件事。

 $(function() { 
     var posts = jQuery.parseJSON($("#MainContent_hdnPosts").val()); 
     $("#Post").html(""); 
     var html = ""; 
     $.each(posts, function (index, a) { 
      html += '<tr><td>' + a.userId + '</td></tr>'; 

     }); 
     $("#Post").append(html); 
    }); 

回答

0

使用下面的代碼我給PHP比如你做後端的ASP.NET:

負載

$(window).scroll(function() { 
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) { 
     var last_id = $("#ticketHistoryData a:last-child").attr('id'); 
     loadMoreData(last_id); 
    } 
}); 
** 

保護負載更多的數據

function loadMoreData(last_id) { 
    $.ajax(
     { 
      url: '../../controllers/support/fetch_hdata.php?last_id=' + last_id , 
      type: "get", 
      beforeSend: function() { 
       $('.ajax-load').show(); 
      } 
     }) 
     .done(function (data) { 
      $('.ajax-load').hide(); 
      $("#ticketHistoryData").append(data); 
     }) 
     .fail(function (jqXHR, ajaxOptions, thrownError) { 
      console.log('server not responding...'); 
     }); 
} 

在控制器收到ID和選擇數據大於當前接收到的ID

select * from data where id < '" . $lastId . "' ORDER BY id DESC LIMIT 10;