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的形式返回給前端
返回數據：