ThinkPHP3.2分页显示,超详细,超简单

最新推荐文章于 2021-04-09 00:39:47 发布

原创最新推荐文章于 2021-04-09 00:39:47 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何在ThinkPHP 3.2中实现分页功能，包括下载并配置AjaxPage类、编写PHP代码实现分页逻辑、HTML结构布局及JavaScript交互，最后展示完整的分页效果。

第一步:导入类

下载AjaxPage.class.php
我这里的提供的是之前3.1时候用的,在3.2用的时候需要在类里面加个命名空间

Paste_Image.png

这个类放在ThinkPHP- Library-Org-Util路径下

Paste_Image.png

第二步:php里该写的代码

ProductController是我建的产品类

 
class ProductController extends PublicController{
 
 
 
    public function index()
 
    {
 
        //导入三方库
 
 
 
        // 查询满足要求的总记录数
 
        $count = $this->model->count();
 
 
 
        //创建对象,指定对象执行的方法
 
        $Page = new \Org\Util\AjaxPage($count,7,"productPage");//productPage是调用js中方法,通过该方法给js传递页码值,7代表一页显示7条数据
 
 
 
        // 实例化分页类 传入总记录数和每页显示的记录数
 
        $show = $Page->show();// 分页显示输出
 
        // 进行分页数据查询 注意limit方法的参数要使用Page类的属性
 
        $list = $this->model->order('id asc')->limit($Page->firstRow.','.$Page->listRows)->select();
 
 
 
 
 
        //判断是不是ajax,
 
        if (!IS_AJAX){
 
 
 
            $this->assign('result',$list);// 赋值数据集
 
            $this->assign('page',$show);// 赋值分页输出
 
            $this->view(); // 输出模板
 
 
 
        }else{
 
 
 
            $data['result']=$list;
 
            $data['page'] = $show;
 
            $this->ajaxReturn($data);
 
        }
 
    }
 
 
 
    //编辑产品
 
    public function edit(){
 
 
 
        //进入编辑页面,显示待编辑的信息
 
        if (!empty($_GET)){
 
            $result = $this->model->where($_GET)->find();
 
            $this->assign('result',$result);
 
        }
 
        //编辑完提交,保存,跳转回首页
 
        if (!empty($_POST)){
 
 
 
            $id = $_POST['id'];
 
            $result = $this->model->where("id=$id")->save($_POST);
 
            //0表示保存失败
 
            if ($result != 0){
 
                redirect('index');
 
            }
 
        }
 
        $this->view();
 
    }
 
 
 
    //删除产品
 
    public function delete(){
 
 
 
        $id = $_GET['id'];
 
        $result = $this->model->where("id=$id")->delete();
 
        if ($result != 0){
 
            $this->redirect('index');
 
        }
 
    }
 
}

3.2的写法

3.1的写法

page输出显示是这样的

result输出显示是这样的

第三步:html该写的代码,把assign过来的数据赋值到td上

下面是对应的代码

 
<table class="table table-bordered table-striped table-hover">
 
    <thead>
 
        <tr>
 
            <th>NO</th>
 
            <th>产品名称</th>                       
 
            <th>单价</th>
 
            <th>备注</th>
 
            <th>操作</th>
 
        </tr>
 
    </thead>
 
    <tbody id="neirong">
 
        <foreach name="result" item="val">
 
            <tr class="cen">
 
                <td>{$val.no}</td>
 
                <td><a href="#">{$val.pro_name}</a></td>
 
                <td>{$val.price}</td>
 
                <td>{$val.remark}</td>
 
                <td>
 
                    <button class="btn btn-primary" onclick="edit({$val.id})">编辑</button>
 
                    <button class="btn btn-danger" onclick="del({$val.id})">删除</button>
 
                </td>
 
            </tr>
 
        </foreach>
 
    </tbody>
 
</table>
 
<div class="panel panel-default">
 
    <div class="panel-bd">
 
        <div class="pagination">{$page}</div>
 
    </div>
 
</div>

解释下关键代码:

<tbody id="neirong">这里设置个id,在js里面会用到

<foreach name="result" item="val">foreach为tp的标签,遍历数组用的,name对应数据源,item是循环变量

<button class="btn btn-primary" onclick="edit({$val.id})">编辑</button>edit是写在js里的方法,根据id编辑内容

<button class="btn btn-danger" onclick="del({$val.id})">删除</button>del是写在js里的方法,根据id删除内容

<div class="pagination">{$page}</div>{$page}是显示1,2,3分页码的,这个class类后面js会用到

第四步:完成前三步,首页的信息肯定可以显示出来了,但是点击页码没有反应,这时候,我们需要在js里面请求新的数据

 
<script>
 
    //点击页码,重新请求数据
 
    function productPage(id) {
 
 
 
        var url = '';
 
        url = '__APP__/home/product/index/p/'+id;
 
 
 
        $.get(url,function (content) {
 
 
 
            //重写html代码
 
            //将pagination div重写一遍
 
            //将json转成对象类型
 
            //var data = eval('('+content+')');  //强制将json转成对象类型
 
            var data = content;
 
 
 
            //输出页码
 
            $('.pagination').html(data.page);
 
 
 
            var l = '';
 
            for (var i = 0; i < data.result.length; i++){
 
 
 
                l += '<tr class="cen">';
 
                l +=    '<td>'+ data.result[i].no +'</td>';
 
                l +=    '<td>'+ data.result[i].pro_name +'</td>';
 
                l +=    '<td>'+ data.result[i].price +'</td>';
 
                l +=    '<td>'+ data.result[i].remake +'</td>';
 
                l +=    '<td><button class="btn btn-primary" onclick="edit('+ data.result[i].id +')">编辑</button><button class="btn btn-danger" onclick="del('+ data.result[i].id +')">删除</button></td>';
 
                l += '</tr>';
 
            }
 
            //重新输出整个表格
 
            $('#neirong').html(l);
 
        });
 
    }
 
 
 
    //点击编辑按钮
 
    function edit(id) {
 
        window.location.href='__APP__/home/product/edit/id/'+id;
 
    }
 
 
 
    //点击删除按钮
 
    function del(id) {
 
        if(confirm("您确定要删除么!")){
 
            window.location.href='__APP__/home/product/delete/id/'+id;
 
        }
 
    }
 
</script>