PHP23 AJAX分页

模型代码设计

以留言信息管理为例。

获取根据条件查询记录总数和分页数据。

<?php

namespace application\admin\models;

use core\mybase\Model;

/**用户留言信息管理数据模型*/
class GbmgrModel extends Model
{
    /**查询有多少条留言*/
    public function count($like = null)
    {
        $sql = null;
        if ($like != null) {
            $sql = "SELECT COUNT(1) AS total FROM guestbook WHERE uname LIKE '%" . $like . "%' ";
        } else {
            $sql = "SELECT COUNT(1) AS total FROM guestbook";
        }
        $result = $this->query($sql, null);
        return $result[0]["total"];

    }

    /**分页留言信息查询*/
    public function list($pageIndex = 1, $pageSize = 10, $like = null)
    {
        $sql=null;
        if ($like != null) {
            $sql = "SELECT * FROM guestbook WHERE uname LIKE '%" . $like . "%' ORDER BY id DESC LIMIT " . ($pageIndex - 1) * $pageSize . "," . $pageSize;
        }else{
            $sql = "SELECT * FROM guestbook ORDER BY id DESC LIMIT " . ($pageIndex - 1) * $pageSize . "," . $pageSize;
        }
        return $this->query($sql, null);
    }


}

　　

控制器代码设计

控制器接受从视图发起的数据请求。

从数据模型获取分页数据，以json格式返回视图。

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2018/7/12
 * Time: 11:21
 */

namespace application\admin\controllers;


use application\admin\models\GbmgrModel;
use core\mybase\Controller;


class PageController extends Controller
{
    public function index()
    {
        $this->display();
    }

    /**分页留言数据*/
    public function listgb()
    {
        $pageIndex = isset($_GET['pageIndex']) ? $_GET['pageIndex'] : 1;
        $pageSize = isset($_GET['pageSize']) ? $_GET['pageSize'] : 10;
        $like = isset($_GET['like']) ? $_GET['like'] : null;
        $gm = new GbmgrModel();
        //获得符合条件的总记录数
        $totalCount = $gm->count($like);
        //获得分页数据
        $list = $gm->list($pageIndex, $pageSize, $like);
        //总页数
        $totalPage = $totalCount % $pageSize == 0 ? $totalCount / $pageSize : intval($totalCount / $pageSize) + 1;

        //上一页
        $previous = $pageIndex <= 1 ? 1 : $pageIndex - 1;
        //下一页
        $next = $pageIndex >= $totalPage ? $totalPage : $pageIndex + 1;

        $result = ["totalCount" => $totalCount, "totalPage" => $totalPage, "pageIndex" => $pageIndex, "previous" => $previous, "next" => $next, "list" => $list];
        echo json_encode($result, JSON_UNESCAPED_UNICODE);
    }
}

　　

视图脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义分页</title>
    <script src="<?php echo __ADMIN_JS__;?>jquery-1.11.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            getByPage(1);
            $("#qureyBut").click(function () {
                getByPage(1);
            });
        });


        function getByPage(pageNo) {
            $("[name=pageIndex]").val(pageNo);//设置表单的 页号参数
            var params = $("#selectName").serialize();//序列化模糊查询条件和页码
            $.getJSON("index.php?g=admin&c=page&a=listgb", params, function (data) {
                //删除表格之前数据(标题栏除外)--->防止出现几页的数据叠加的情况
                $("#selectTable tr").not(":first").remove();
                //设置上一页 下一页连接
                $("a:eq(0)").attr("href", "javascript:getByPage(1)");
                $("a:eq(1)").attr("href", "javascript:getByPage(" + data.previous + ")");
                $("a:eq(2)").attr("href", "javascript:getByPage(" + data.next + ")");
                $("a:eq(3)").attr("href", "javascript:getByPage(" + data.totalPage + ")");
                //设置显示信息(当前页号,总页号,总条数)
                $("#pageIndex").html(data.pageIndex);
                $("#totalPage").html(data.totalPage);
                $("#totalCount").html(data.totalCount);
                //在表格添加数据 使用each方法遍历 控制器传回的数据中的list集合
                $.each(data.list, function () {
                    var tr = "<tr>" +
                        "<td>" + this.id + "</td>" +
                        "<td>" + this.uname + "</td>" +
                        "<td>" + this.uemail + "</td>" +
                        "<td>" + this.uphone + "</td>" +
                        "<td>" + this.umessage + "</td>" +
                        "</tr>";
                    $("#selectTable").append(tr);
                });
            });
        }
    </script>
</head>
<body>

<div class="menu">
    <form method="post" action="#" id="selectName">
        <input name="pageIndex" type="hidden" value="1">
        用户名：<input name="like" class="input-text" type="text" value="">     
        <input value="查 询" type="button" id="qureyBut">
    </form>
</div>

<div class="content">

    <table id="selectTable" border="1px">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>邮箱</th>
            <th>电话</th>
            <th>留言</th>
        </tr>
    </table>

    当前第<span id="pageIndex"></span> 页 ,
    总页数:<span id="totalPage"></span>,
    总条数:<span id="totalCount"></span>     

    <a href="">首页</a>
    <a href="">上一页</a>
    <a href="">下一页</a>
    <a href="">末页</a>
</div>

</body>
</html>

　　

测试效果

 

　　

posted @ 2018-07-12 15:50  rask  阅读(400)  评论(0)    收藏  举报