javascript - Jquery 无限滚动循环使用 Mysql/PHP

Question

我正在尝试将在 ( http://infiniteajaxscroll.com/ ) 找到的 Jquery infinity scroll 与我的 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


        ));

Answer 1

您需要将该页面实现到您的 SQL 查询中。

下面我们定义了两个新的变量，一个是每次要检索的总行数，下一个是每次限制查询要跳过的行数，从0开始如果$page = 1

$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";