跟着咖啡学php(一)----分页查询(php+mysql+bootstrap)

我们今天来聊一下，在WEB网站中比较常见的分页查询。
首先：我们还是先启动服务器和起动mysql：
这里写图片描述

那么我们开始编写HTML代码,这里的样式我用的是bootstrap

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

HTML代码:

<!DOCTYPE html>                 
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .a {
                background: #ddd;
                height: 200px;
                border: 1px solid #ccc;
            }
        </style>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
    </head>

    <body>
        <div class="container">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">
                            <div class="col-md-3 a">商品1</div>
                            <div class="col-md-3 a">商品2</div>
                            <div class="col-md-3 a">商品3</div>
                            <div class="col-md-3 a">商品4</div>


                    </div>
                </div>

                <div class="panel-footer">
                    <ul class="pagination">

                        <li>
                            <a href="#">1</a>
                        </li>
                        <li>
                            <a href="#">2</a>
                        </li>
                        <li>
                            <a href="#">3</a>
                        </li>
                        <li>
                            <a href="#">4</a>
                        </li>



                    </ul>

                </div>

            </div>

        </div>
        <script>

        </script>
    </body>

</html>

OK,那么我们开始编写php代码,这里要注意,我并不是用AJAX来实现的分页查询,如果你想知道，怎么用AJAX查询，那么请看我其它的文章。

1.通过phpadmin我们来建立一个数据库(shop)，里面有shop_list字段，结构如下:
这里写图片描述

2.编写连接数据库代码:

    $conn = mysqli_connect("localhost","root","","shop");
        if(!$conn){
            echo 失败;
        }
    mysqli_query($conn,"set names utf8");

3.计算商品个数:

    $sql = "select count(*) from shop_list";
    $res = mysqli_query($conn,$sql);
    $row = mysqli_fetch_assoc($res);

4.通过$_GET方式获取地址中的page参数

    $page = intval($_GET['page']);//获取url中page参数：例如：
    http://localhost/php1/page.php?page=1

    $page = $page < 1 ? 1 : $page; //限制page不可以小于1

    $pagesize = 4;  //定义每页筛选的个数

    $recordscount = $row['count(*)'];//获取数据的总长度

    $pageCount = ceil($recordscount / $pagesize);//向上取整
    例如:4.5=>4 4.2=>4

    if($page>=$pageCount){
        $page = $pageCount;
    }

5.获取当前页显示的个数

    $index = ($page - 1) * $pagesize; 
    $sql = "select * from shop_list limit $index,$pagesize";
    $res = mysqli_query($conn,$sql);
    $arr = Array();
    while( ($row=mysqli_fetch_assoc($res)) != false ) {
        $arr[] = $row;
    }

6.修改HTML代码:

<div class="container">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">
                        <?php 
                            foreach ($arr as $key => $value) {
                                echo "<div class='col-md-3 a'>{$value['shop_name']}</div>";
                            }   
                        ?>
                    </div>
                </div>

                <div class="panel-footer">
                    <ul class="pagination">
                          <li>
                              <a href="page.php?page=<?php echo $page-1<1?1:$page-1?>" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                              </a>
                         </li>
                        <?php
                            for($i=1;$i<=$pageCount;$i++){
                                if($page==$i){
                                    echo "<li class='active'><a href='page.php?page=$i'>".$i."</a></li>";
                                }else{
                                    echo "<li><a href='page.php?page=$i'>".$i."</a></li>";
                                }       
                            }       
                        ?>
                        <li>
                          <a href="page.php?page=<?php echo $page+1>$pageCount?1:$page+1?>" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                          </a>
                        </li>   
                    </ul>
                </div>
            </div>
        </div>

完整代码如下:

<?php
    $conn = mysqli_connect("localhost","root","","shop");
    if(!$conn){
        echo 失败;
    }
    mysqli_query($conn,"set names utf8");
    $sql = "select count(*) from shop_list";
    $res = mysqli_query($conn,$sql);

    $row = mysqli_fetch_assoc($res);

    $page = intval($_GET['page']);

    $page = $page < 1 ? 1 : $page; 

    $pagesize = 4;  
    $recordscount = $row['count(*)'];
    $pageCount = ceil($recordscount / $pagesize);
    if($page>=$pageCount){
        $page = $pageCount;
    }


    $index = ($page - 1) * $pagesize;

    $sql = "select * from shop_list limit $index,$pagesize";
    $res = mysqli_query($conn,$sql);
    $arr = Array();
    while( ($row=mysqli_fetch_assoc($res)) != false ) {

        $arr[] = $row;
    }


?>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <style>
            .a {
                background: #ddd;
                height: 200px;
                border: 1px solid #ccc;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
    </head>
    <body>
        <div class="container">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">
                        <?php 
                            foreach ($arr as $key => $value) {
                                echo "<div class='col-md-3 a'>{$value['shop_name']}</div>";
                            }

                        ?>
                    </div>
                </div>

                <div class="panel-footer">
                    <ul class="pagination">
                          <li>
                              <a href="page.php?page=<?php echo $page-1<1?1:$page-1?>" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                              </a>
                         </li>
                        <?php
                            for($i=1;$i<=$pageCount;$i++){
                                if($page==$i){
                                    echo "<li class='active'><a href='page.php?page=$i'>".$i."</a></li>";
                                }else{
                                    echo "<li><a href='page.php?page=$i'>".$i."</a></li>";
                                }   
                            }

                        ?>
                        <li>
                          <a href="page.php?page=<?php echo $page+1>$pageCount?1:$page+1?>" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                          </a>
                        </li>   
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

这种是最为传统的方式来进行商品分页，在现在这个AJAX和MVVM框架流行的年代里,这种方式已经很少有人会用的了。但我觉得，如果你是PHP的初学者，那么这种方式，还是掌握为好。但是，大家可以发现，我上面的PHP代码比较冗余，其实可以面向对象的方式来处理这个问题。希望，读者们可以自行尝试一下，有问题可以联系我。 - - ！

跟着咖啡学php(一)----分页查询(php+mysql+bootstrap)

猜你喜欢