jscroll加載數據時末尾

我有一些UI元素，需要無限滾動。所以我使用jscroll。當div處於末尾時，我想獲取新數據。jscroll加載數據時末尾

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script src=js/jquery.jscroll.js></script> 
<script> 

$('.scrollt').jscroll(function(){ 
    $(".scrollt").load("/handle.php?lastdis=90");}); 

</script> 
</head> 
<body> 


<?php 
include_once('conn.php'); 

$start=0; 
$query="Select * from data where id > ". $start ." Limit 90;"; 
$res=mysqli_query($con,$query); 

echo '<div class="scrollt">'; 
while ($row = mysqli_fetch_array($res, MYSQL_NUM)) { 
    echo "<p> ".$row[0]." &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;". $row[1]."<p><p><p>"; 
} 

echo "</div>" 

?> 

</body> 
</html>

所以基本上我顯示與90個記錄的頁面，並希望獲取在負載91以上的記錄（）function.But這不起作用。

handle.php代碼

<?php 
include_once('conn.php'); 
$goahead=$_GET['lastdis']; 

$query="Select * from data where id > ". $goahead ." Limit 20;"; 
$res=mysqli_query($con,$query); 
while ($row = mysqli_fetch_array($res, MYSQL_NUM)) { 
    echo "<p> ".$row[0]." &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;". $row[1]."<p><p><p>"; 
}

我只需要兩個小時的jQuery experience.Please熊。

來源

2013-08-02 Sankalp

使用.scroll()事件上window，像這樣：

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     alert("bottom!"); 
    } 
});

You can test it here，這需要在窗口頂部的滾動，所以它是多麼的向下滾動，增加了可視窗口和檢查的高度，如果是等於整個內容的高度（document）。如果你想，而不是檢查用戶是否附近下，它會是這個樣子：

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 
     alert("near bottom!"); 
    } 
});

You can test that version here，只是調整的是100到要觸發任何從底部像素。

現在，只需提示底層用戶使用ajax即可獲取要添加到底部的數據。

$.ajax({ 
     url: "handle.php", 
     type: "post", 
     data: values, 
     success: function(data){ 
      $("#result").append(data); 
     }, 
     error:function(){ 
      alert("failure"); 
      $("#result").append('Error Occurred while fetching data.'); 
     } 
    });

來源

2013-08-02 16:39:06

花了一段時間接受答案。謝謝。 – Sankalp

@Sankalp酷;） –

jscroll加載數據時末尾

回答

相關問題