【TP5项目统一规范】列表带分页查询

author：咔咔

wechat：fangkangfk

整体思路步骤：

1.前端拼接js数据

2.使用layui分页

3.请求后台控制器

4.控制器将前端请求的页面，跟每页显示的数据传给server层

5.server层需要根据这俩个参数在模型里边带分页查询，并且查询返回总数据量

6.最后初始化返回给控制器的数据结构

7.控制器接收到树结构返回json格式的给js即可

前台js拼接数据

{include file="../../../application/admin/view/public/head" /}
<div class="page-container p10">

    <div class="my-toolbar-box">
        <div class="layui-btn-group">
            <a data-full="1" data-href="{:url('info')}" class="layui-btn layui-btn-primary j-iframe"><i class="layui-icon">&#xe654;</i>添加</a>
        </div>

    </div>

    <form class="layui-form " method="post" id="pageListForm">
        <table class="layui-table" lay-size="sm">
        <thead>
            <tr>
                <th width="25">ID</th>
                <th width="50">分类名</th>
                <th width="50">标题</th>
                <th width="40">横竖屏</th>
                <th width="40">专题类型</th>
                <th width="40">排序</th>
                <th width="80">是否首页推荐</th>
                <th width="120">支持开关</th>
                <th width="130">操作</th>
            </tr>
            </thead>
            <tbody id="tab_list"></tbody>
        </table>
    </form>
</div>

{include file="../../../application/admin/view/public/foot" /}
<div id="pages" class="center"></div>

<script type="text/javascript">

    window.onload= function () {
        loadData(); //请求数据
        getPage();     //分页操作
    }
    var page=1; //设置首页页码
    var limit=1;  //设置一页显示的条数
    var total;    //总条数
    function loadData(){
        $.ajax({
            type:"post",
            url:"{url(Subject/index)}",//对应controller的URL
            async:false,
            dataType: 'json',
            data:{
                "page_index":page,
                "page_size":limit,
            },
            success:function(ret){
                total=ret.total_count;

                var data1=ret.data;
                var html= '';
                for(var i=0;i<data1.length;i++){
                    html+='<tr>';
                    html+='<td>'+ data1[i].vs_id +'</td>';
                    html+='<td>'+ data1[i]['video_type']['vt_name'] +'</td>';
                    html+='<td>'+ data1[i]['vs_title'] +'</td>';
                    html+='<td>'+ data1[i]['vs_isLandscape'] +'</td>';
                    html+='<td>'+ data1[i]['vs_type'] +'</td>';
                    html+='<td>'+ data1[i]['vs_sort'] +'</td>';
                    html+='<td>'+ data1[i]['vs_recommend'] +'</td>';
                    html+='<td>'+ data1[i]['vs_supportSwitch'] +'</td>';
                    html+='<td>';
                    html+='<a class="layui-badge-rim j-iframe" data-full="1" data-href='+ROOT_PATH+'/index.php/admin/banner/editBanner?b_id='+data1[i]['b_id']+' "href="javascript:;" title="编辑">编辑</a>';
                    html+='<a class="layui-badge-rim j-tr-del del" data-href='+ROOT_PATH+'/index.php/admin/banner/delBanner?b_id='+data1[i]['b_id']+' href="javascript:;" title="删除">删除</a>';
                    html+='</td>';

                    html+='</tr>';
                }
                $("#tab_list").html(html);
            }
        });
    }


    function getPage(){
        layui.use('laypage', function(){
            var laypage = layui.laypage
                , layer = layui.layer;
            laypage.render({
                elem: 'pages'
                ,count: total //数据总数，从服务端得到
                ,limit:10
                ,jump: function(obj, first){
                    page=obj.curr;  //改变当前页码
                    limit=obj.limit;
                    loadData()
                }
            });
        });
    }


    $(document).on('click','.del',function(){
        var that = $(this),
            href = !that.attr('data-href') ? that.attr('href') : that.attr('data-href');
        layer.confirm('删除之后无法恢复，您确定要删除吗？', {title:false, closeBtn:0}, function(index){
            if (!href) {
                layer.msg('请设置data-href参数');
                return false;
            }
            $.get(href, function(res){
                layer.msg(res.msg);
                if (res.code == 1) {
                    that.parents('tr').remove();
                }
            });
            layer.close(index);
        });
        return false;
    })

</script>
</body>
</html>

这里我复制了一份源码下来分解解释：

首先需要ajax请求，去后台获取数据，刚刚开始不需要关心后台怎么写

然后我们需要一个存放数据的地方，看上图我们把最终的html变量存放到了#tab_list中，所以我们需要在html里边创建一个id为他的标签

下来就是引入layui分页

这个总数据量是后台过来的，我们在最顶部设置了一个total的变量，在ajax请求后会把这个参数返回回来，这里是检测页面的变动，并将页码跟页面显示数量给loaddata()请求数据

写到这里分页的效果是不会出来的，我们看到分页里边有一个参数是elem，这里边放置的是dom元素，所以我们需要创建一个标签

看页面效果：

这个时候页面就有分页了

下来就是后端代码：

控制器接受前端ajax请求的参数，并传递给server层处理

    /**
     * author:咔咔
     *
     * 专题列表数据
     * @return Json 
     */
    public function index()
    {
        if($this->request->isPost()){
            $page_index = $this->request->param('page_index');
            $page_size  = $this->request->param('page_size');
            $subjectList = $this->subjectServer->subjectList($page_index,$page_size);
            return json($subjectList);
        }
        return $this->fetch();
    }

在subjectServer层中需要做俩件事，一个就是需要在模型里边获取带分页的数据，还有一个就是获取数据总量

然后subject模型查询带分页的数据，跟数据总量，然后将数据返回给server层

这个时候又会来到subjectServer层处理数据

在server层我们继承了BaserServer

BaseServer层会处理分页数据，并返回最终数据给控制器

控制器接收到最终数据，以json的形式返回给前端

返回数据：

【TP5项目统一规范】列表带分页查询

猜你喜欢