所以我的页面有无限的滚动设置。在没有无限滚动的情况下,数据加载并看起来不错,当我向查询中添加LIMIT时,似乎根本就无法正常工作。当我var_dump($ start)或($ limit)时,它们都显示正确的值。似乎发生的是,它仅捕获并显示前5个结果,而不是在我的AJAX代码中向$ start添加5个结果。
这是我获取数据的代码:
if(isset($_POST['start']) && isset($_POST['limit'])){
$start = $_POST['start'];
$limit = $_POST['limit'];
}
$query = "SELECT
count(replies.reply_topic) as replyCount,
topics.topic_id,
topics.topic_subject,
topics.topic_date,
topics.topic_cat,
topics.topic_creator,
topics.topic_likes,
users.user_id,
users.username,
profile.profile_id,
profile.profile_pictureMain,
profile.profile_users
FROM
topics
LEFT JOIN
users
ON
topics.topic_creator = users.user_id
LEFT JOIN
replies
ON
replies.reply_topic = topics.topic_id
LEFT JOIN
profile
ON
profile.profile_users = users.user_id
GROUP BY
topics.topic_id
ORDER BY
topics.topic_likes DESC
LIMIT :start, :limit //<-When I add this line it will only display 5 items max
";
$stmt = $conn->prepare($query);
$stmt->bindParam(':start', intval($start), PDO::PARAM_INT); //<-not sure if bindParam is causing an issue...intval() is needed in order to prevent an SQL error
$stmt->bindParam(':limit', intval($limit), PDO::PARAM_INT);
$stmt->execute();
$returnAmt = $stmt->fetchAll();
if($stmt->rowCount() > 0){
$returnValues = "";
foreach($returnAmt as $row){
$returnValues .=
'data to display';
}
echo $returnValues;
exit();
}else{
exit('No more results');
}
然后在我的jquery文件中,我有了AJAX调用
function infiniteScrollData(){
if(reachedMax){
return;
}
$.ajax({
method: "POST",
url: "sortResults.php",
dataType: "text",
data: {
infiniteScrollData: 1,
start: start,
limit: limit
},
success: function(returnValues){
if(returnValues == "No more Results"){
reachedMax = true;
}
else{
start += limit;
$("#rowDisplayResults").append(returnValues);
}
}
});
}
最后我在主页上显示数据:
<div id="rowDisplayResults">
<!--Display results here-->
</div>
<script type="text/javascript">
//Variables for infinite scroll
var start = 0;
var limit = 5;
var reachedMax = false;
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
infiniteScrollData();
}
});
$(document).ready(function(){
//infinite scroll
infiniteScrollData();
});
</script>
谢谢!