PHP23 AJAX分頁

時間 2019-12-01

標籤 php23 php ajax 分頁欄目 PHP 简体版

原文原文鏈接

模型代碼設計

以留言信息管理爲例。javascript

獲取根據條件查詢記錄總數和分頁數據。php

<?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);
    }


}

控制器代碼設計

控制器接受從視圖發起的數據請求。html

從數據模型獲取分頁數據，以json格式返回視圖。java

<?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>

測試效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。