Question

]如何在点击链接时显示更多记录？

例如，我的表格中有200条记录，并希望回显其中的30条记录。点击按钮/链接回显50而不是30。

我现在使用此代码回应其中的30个。

$dbc = mysqli_connect("localhost","uname", "upass", "db_name") or 
                   die('could not connect: '. mysqli_connect_error());

       $sql = "SELECT * FROM tbl_aanbiedingen LIMIT 30";
       $result = mysqli_query($dbc, $sql);

               while ($row = mysqli_fetch_array($result)) { 

               echo "<div id=aanbieding> <img class='productimage' src='".$row['image']."'> <p class='prijs'>" . $row['prijs'] . "</p> <p class='descriptie'>" . $row['product'] . "</p><img class='blogo' src='images/".$row['winkel']."'></div>";  
               }

如果我想将其增加到50？

我当然可以将页面增加限制复制到50并链接到那个但是有更好的方法吗？

Answer 1

首先，用以下代码替换您的代码：

$dbc = mysqli_connect("localhost","uname", "upass", "db_name") or 
                   die('could not connect: '. mysqli_connect_error());
if(isset($_GET['limit'])){$limit = intval($_GET['limit']);}
else{$limit = 30;}
       $sql = "SELECT * FROM tbl_aanbiedingen LIMIT ".$limit;
       $result = mysqli_query($dbc, $sql);

               while ($row = mysqli_fetch_array($result)) { 

               echo "<div id=aanbieding> <img class='productimage' src='".$row['image']."'> <p class='prijs'>" . $row['prijs'] . "</p> <p class='descriptie'>" . $row['product'] . "</p><img class='blogo' src='images/".$row['winkel']."'></div>";

然后，使用以下解决方案之一：

方法1-仅使用HTML

（需要更少的代码，无需加载库，但页面需要刷新。）

将此代码用于您的按钮：

<button><a href="yourphppage.php?limit=50">View more</a></button>

方法2-使用jquery

（需要更多代码，需要jquery库，无需刷新。我个人选择此解决方案。）

1）在页面的<head>部分输入以下代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function openLink(url){
$("#more").html("Loading...");
$("#more").load(url, function (responseText, textStatus, req) {
   if (textStatus == "error") {
      $("#princ").html('An error occurred! Please try again.');
   }
});
}
</script>

2）然后，将此代码用于您的按钮：

    <button><a href="yourphppage.php?limit=50" onclick="return:false; javascript:openLink('yourphppage.php?limit=50');">View more</a></button>
<div id="more"></div>

Answer 2

而不是进行2次调用，将前30个放在一个包装器div中。将第二个20放在另一个包装器div中。当有人将其从30更改为50时，请启用第二个div。它的处理，服务器连接和编码都较少。保持简单。

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript Example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>

    <script type="text/javascript">
    function updateDisplay(val) {
        var dNum = val;
        if(dNum == 50){
          document.getElementById("wrapper2").style.display="block";
          alert(dNum);
        } else {
          document.getElementById("wrapper2").style.display="none";
          alert(dNum);
        }

    }
    </script>


    <select name="limit" onChange="updateDisplay(this.value)">
       <option value="30">Show 30</option>
       <option value="50">Show 50</option>
    </select>

    <div id="wrapper1">
     First 30 go here.
    </div>
    <div id="wrapper2" style="display:none;">
     Next 20 go here.
    </div>


    </body>
</html>

回应特定数量的记录

2 个答案:

方法1-仅使用HTML

方法2-使用jquery