author：咔咔javascript
wechat：fangkangfkphp
总体思路步骤：html
1.前端拼接js数据前端
2.使用layui分页java
3.请求后台控制器ajax
4.控制器将前端请求的页面，跟每页显示的数据传给server层json
5.server层须要根据这俩个参数在模型里边带分页查询，而且查询返回总数据量后端
6.最后初始化返回给控制器的数据结构数据结构
7.控制器接收到树结构返回json格式的给js便可app
前台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"></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的形式返回给前端
返回数据：