我正在尝试实现Jquery无穷大滚动(http://infiniteajaxscroll.com/)以及我的MYSQL和PHP。它起作用了。
我在这里找到了类似的例子,但我的例子完全不同(http://www.w3bees.com/2013/09/jquery-infinite-scroll-with-php-mysql.html)
加载更多的工作很好,但我的结果被反复循环。我的意思是,我在第一页中显示所有结果,当我在底部向下滚动并启动无限滚动时,会显示相同的结果,而不是将第一个结果拆分到不同的页面中。
这是我的代码,很长:)
<?php
$page = (int) (!isset($_GET['s'])) ? 1 : $_GET['s'];
// GET ALL THE SHOUTBOX
$sql = "SELECT * FROM shoutbox
ORDER BY id DESC
LIMIT 20";
//prepare the statement
$statement = $dbConn->prepare($sql);
//execute the statement
$statement->execute();
//Count the shouboxes
$number_of_shoutbox = $statement->rowCount();
$number_of_posts_per_page = '10';
$total_pages = $number_of_shoutbox / $number_of_posts_per_page;
?>
<div class="background_spacing"></div> <!-- end of background spacing -->
<div id="header_background">
<div class="shoutbox-background text-center">
<div id="shoutbox">
<!-- SHOUTBOX COMPLETE STARTS -->
<div class="shoutbox_complete">
<div class="shoutbox_left">
<img src="images/girl-shoutbox.jpg">
</div>
<div class="shoutbox_right background-white">
<div class="no-padding padding10">
<span class="font24 font-color-000000">NAPISI SVOJ</span>
<span class="font24 username_male">SHOUTBOX</span>
<textarea class="shoutbox-form no-padding" placeholder="Ostavite i vi jedan shoutbox..."></textarea>
<input type="submit" class="button_standard_pink float-right">
</div>
</div>
</div>
<!-- SHOUTBOX COMPLETE STARTS -->
</div> <!-- end of id="shoutbox -->
</div>
</div> <!-- END OF HEADER_BACKGROUND -->
<div class="margin30"></div><!-- Spacing -->
<div class="shoutbox-total">
<div id="shoutbox">
<div class="shoutbox-counter no-padding padding-10 background-shoutbox-counter">
<div class="font48 text-center"><?php count_shoutbox();?></div>
<div class="text-center">shoutbox has been shouted!</div>
<div class="text-center padding-10"><img src="images/default/default-shoutbox-shout.png"></div>
<div class="text-center font10">INVITE YOUR FRIENDS TO SHOUT!</div>
</div>
</div>
<?
//LOOP THROUGH THE SHOUBOXES
while($show_shoutbox = $statement->fetch(PDO::FETCH_BOTH)) {
?>
<div id="shoutbox">
<!-- SHOUTBOX COMPLETE STARTS -->
<div class="shoutbox_complete_display">
<div class="shoutbox_left">
<img src="images/man-shoutbox.jpg">
</div>
<div class="shoutbox_right-display background-box-light-gray">
<div class="no-padding padding-10">
<div class="font24 username_male" style="line-height:1;"><?php echo strtoupper($show_shoutbox['user_name']);?> <?php echo $show_shoutbox['user_age'];?> GODINE</div>
<span class="font-color-898a8b">IZ <?php echo strtoupper($show_shoutbox['country']);?> - TRAŽI <?php echo strtoupper($show_shoutbox['gender_search']);?> IZMEĐU <?php echo strtoupper($show_shoutbox['age_from']);?> I <?php echo strtoupper($show_shoutbox['age_to']);?> GODINA</span>
<div class="margin15"></div>
<div class="font20"><?php echo $show_shoutbox['text'];?></div>
<div style="margin-top:52px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td>
<td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td><td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td><td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td>
</tr>
</table>
</div> <!-- end of margin-top:60 -->
</div> <!-- end of no-padding padding-10 -->
<!-- COMMENT START HERE -->
<?php
// d($detail);
$type='question';
// include('like.php');
include('includes/comment.php');
?>
<!-- COMMENT END HERE -->
</div> <!-- end of shoutbox_right-display -->
</div> <!-- end of shoutbox_complete -->
</div> <!-- end of id="shoutbox -->
<?php } // end of the shoubox loop
?>
</div>
<!--page navigation-->
<div id="nav">
<?php
for ($x = 2; $x <= $total_pages; $x++) {
?>
<a href='welcome.php?p=shoutbox&s=<?php echo $x;?>' <?php if($x=='2') { echo 'class="next"';}?>></a>
<?php } ?>
</div>
<script type="text/javascript" src="js/jquery.infinity.scroll.js"></script>
<script type="text/javascript">
var ias = $.ias({
container: ".shoutbox-total .shoutbox_complete_display",
item: "#shoutbox",
pagination: "#nav",
next: ".next"
});
ias.extension(new IASSpinnerExtension());
ias.extension(new IASTriggerExtension({offset: 3}));
ias.extension(new IASNoneLeftExtension({text: 'There are no more pages left to load.'}));
========================================================================通过在MYSQL中仍然存在错误来更新代码:
尝试过@Rob Schmuecker解决方案,但现在在mysql中出现错误。
这是我用PDO和Rob Schmuecker建议修改的代码
// GET ALL THE SHOUTBOX
$sql = "SELECT
shoutbox.shoutbox_id,
shoutbox.text,
shoutbox.date,
shoutbox.time,
shoutbox.approved,
shoutbox.`new`,
shoutbox.user_id,
users.profile_image,
users.user_name,
users.user_age,
users.country,
users.gender_search,
users.age_from,
users.age_to
FROM shoutbox INNER JOIN users ON shoutbox.user_ID = users.id
WHERE users.profile_image = '2'
AND shoutbox.approved = '1'
AND shoutbox.new = '0'
AND shoutbox.user_id != :admin_id
AND (shoutbox.user_id NOT IN (SELECT user_id FROM users_blocked WHERE blocked_id = :user_id))
ORDER BY shoutbox.shoutbox_id DESC
LIMIT :limit_start :limit_row_amount";
//prepare the statement
$statement = $dbConn->prepare($sql);
//execute the statement
$statement->execute(array(
'admin_id' => $admin_id,
'user_id' => $user_id,
'limit_start' => $limit_start,
'limit_row_amount' =>$limit_row_amount
));
您需要在SQL查询中实现页面。
下面我们定义了两个新变量,一个是每次要检索的总量,另一个是在每次限额查询中要跳过的行数,如果$page = 1
,则从0开始
$page = (int) (!isset($_GET['s'])) ? 1 : $_GET['s'];
$limit_row_amount = 20;
if($page > 1){
$limit_start = $page * $limit_row_amount;
} else {
$limit_start = 0;
}
// GET ALL THE SHOUTBOX
$sql = "SELECT * FROM shoutbox
ORDER BY id DESC
LIMIT $limit_start, $limit_row_amount";