php - 如何在一页上显示来自 PHP 查询的特定行数，然后在返回的行数超过指定数量时扩展 div

Question

问题 1:

我有一个名为 user_thoughts 的表。爱丽丝有 15 个想法(15 行)。目前，每个想法都被处理并显示在一个 div 中，但我希望在一个页面上显示 10 个想法或 10 行，然后用户可以点击 load more 按钮来显示其余的剩余想法。

一页基本上应该描述每页最多 10 个想法。我试过 LIMIT 子句，但后来意识到 LIMIT 子句只返回数据库中的前 10 行。

问题 2:

如果用户每页超过 10 个想法，目的是在用户到达页面底部时在页面上显示另一组想法(10 个新想法)。

这是根据用户返回的行数回显新 div 的代码:

<div id="userposts_panel">
    echo " <div class='small' style='min-height: 150px;'>
                <div class='panel panel-default' style='margin-left:15px; margin-right:15px; margin-top:10px;'>
                        <div class='panel-body'>
                            <div class='more_options' style='float: right;'>
                                <span id='options' class='glyphicon glyphicon glyphicon-flag' aria-hidden='true'></span> 
                                <span style='padding-left: 5px; padding-right: 5px;'> | </span>
                                <span id='remove' class='glyphicon glyphicon-remove' aria-hidden='true'></span> 
                            </div>
                            <img src='$profile_pic' height= '68px' style='border: 1px solid #F0F0F0;'/>
                            <span style='margin-left: 10px;'>$message_content </span> <br/> <br/>
                        </div>
                        <div class='panel-footer'>
                            <a href='profile_page/$thoughts_by'> <b> $name_of_user </b> </a> - $date_of_msg on $time_of_msg  
                            <div class='mini_nav' style='float: right;'>
                                <span class='glyphicon glyphicon-heart-empty' aria-hidden='true' style='padding-right: 5px;' onclick='changeIcon()' ></span> 
                                |
                                <a href='#' onclick='return toggle($thought_id);' style='padding-left: 5px;'> View comments </a> 
                            <div id='toggleComment$thought_id' style='display:none;'>
                                <br/> $comment_body
                            </div>

                            </div>
                        </div>
                    </div>
        </div>";
?>
</div>

我尝试了以下方法:

function yHandler (){
    var userposts_panel = document.getElementById('userposts_panel');   
    var contentHeight = userposts_panel.offsetHeight; // get page height
    var yOffset = window.pageYoffset;// get vertical scroll position - find out where user is on scroll.
    var y = yOffset + window.innerHeight;

     if (y >=contentHeight){ // if the user scroll to the very bottom, do this..
         userposts_panel.innerHTML += '<div class="userposts_panel"></div>'


         }
 }
    // event listner
    window.onscroll = yHandler;

但是滚动到页面底部时似乎没有展开div。

Answer 1

这就是所谓的无限滚动。许多博客主题和 tumblr 都在使用它。这里有一个非常好的演示和教程，它一次加载 10 个，就像你描述的那样:http://www.w3bees.com/2013/09/jquery-infinite-scroll-with-php-mysql.html

它只是像平常一样使用分页，但有点 secret 地将它加载到同一页面中，使其看起来像一个大页面。您可以在演示中看到 url 的变化:

<a href='index.php?p=<?php echo $next?>'>Next</a>