【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