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

Posted 2023-02-24

【中文标题】如何在一页上显示来自 PHP 查询的特定行数，然后如果返回的行数超过指定数量，则展开 div

【英文标题】：How to display specific number of rows from PHP query on one page and then expanding the div if the rows returned are more than the specified amount

【发布时间】：2016-06-07 00:40:21

【问题描述】：

问题 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。

【参考方案1】：

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

它只是像往常一样使用分页，但会在同一页面中偷偷地加载它，使其看起来像一个大页面。您可以在演示中看到 url 的变化：

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