【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的形式返回给前端

返回数据：

文章来源: blog.csdn.net，作者：咔咔-，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/fangkang7/article/details/85092237