一、背景
在使用thinkPHP框架做項目的時候，經常會遇到對列表的內容進行分頁。thinkPHP框架中自帶了分頁功能，但是有缺陷。這個缺陷是每次返回每頁數據給頁面時需要重新加載頁面所需要的JS、CSS等資源。如果頁面包含的JS過多、過大，會增加流量壓力。因此，我們使用laypage插件。每次使用ajax請求獲取每頁的數據就可以了，不需要重復加載頁面。
二、分頁流程
如下圖所示：
流程說明：
1) 調研App.php中的函數，該函數調用fetch函數。fetch函數渲染list.html.
2) list.html 調用獲取總頁數的函數，并得到總頁數。
3) 獲取第一頁數據。
4)初始化laypage分頁插件。
5)點擊頁碼，觸發分頁查詢。
三、實現分頁功能相關的代碼
1、App.php Controller的代碼
//fetch渲染頁面
public function index()
{
return $this->fetch('list');
}
//根據頁面傳入的頁碼查詢數據
public function getPage()
{
<span style="color:#FF0000;">// 獲取頁面傳入的頁碼 </span>
$nowpage = input("page");
//每頁顯示10條數據
$limits = 10;
$app = new appInfo();
$page_info = $app->limit(($nowpage * $limits), $limits)->select();
// ajax 分頁輸出
$info = ['pageinfo'=>$page_info,'nowpage'=>$nowpage,'nowpage'=>$nowpage];
return json($info);
}
//獲取所有頁數
public function getAllPage(){
try{
$count = appInfo::count();
$limits = 10;
// 計算總頁面
$allpage = ceil($count / $limits);
$info =['allpage'=>$allpage];
}catch (\Exception $e){
abort(500,$e->getMessage(),['result'=>TopsecGWErrer::TOPSEC_GW_ERR_NO_UNKNOWN]);
}
return json($info);
}
2、list.html中的html代碼
<div class="box-body">
<table id="table1" class="table table-bordered table-striped">
<thead>
<tr>
<th>應用名稱</th>
<th>應用類型</th>
<th>應用圖像</th>
<th>創建日期</th>
<th>修改日期</th>
<th>操作</th>
</tr>
</thead>
<tbody id="table_body"></tbody>
<tfoot>
</tfoot>
</table>
<div id="result"></div>
<div class=" ">
<button id="add_app" type="button" class="btn btn-primary col-xs-offset-5" >
<span class='fa fa-tasks white'></span>丨添加應用
</button>
</div>
<div id="content"> </div>
<div class="box-body">
<button id="add_img" type="button" class="btn btn-primary col-xs-offset-5" >
<span class='fa fa-tasks white'></span>丨添加圖片
</button>
</div>
<!-- /.box-body -->
</div>
3、list.html中的jQuery代碼
//pageCount：總頁數。用于初始化laypage分頁控件。
//pageIndex：初始化當前頁。顯示第一頁。
//currentPage：當前頁數。
//getPageData:獲取每頁數據的函數。
//url:獲取每頁數據的方法的路徑。由控制器和函數名組成。
function jsonPage(pageCount, pageIndex,currentPage, getPageData,url) {
var laypageindex = laypage({
cont: 'result', //容器。值支持id名、原生dom對象，jquery對象。
skin: '#3c8dbc',
pages: pageCount, //通過后臺拿到的總頁數
curr: pageIndex, //初始化當前頁
prev: '上一頁', //若不顯示，設置false即可
next: '下一頁', //若不顯示，設置false即可
skip: true, //是否開啟跳頁
jump: function (obj, first) { //觸發分頁后的回調
//getPageData(1);
if (!first) { //點擊跳頁觸發函數自身，并傳遞當前頁：obj.curr
getPageData(url,obj.curr);
currentPage = obj.curr;
}
}
});
}
/url:獲取總頁數據的方法的路徑。由控制器和函數名組成。
function getAllpage(url){
var tmp ;
$.ajax({
type: "GET",
dataType: "json",
async: false,
url: PUBLIC_BASE+url,
success: function(json) {
var data = eval(json);
tmp=data.allpage;
},
error: function(json) {
}
});
return tmp;
}
//data:每頁的數據。由JSON對象組成。
function instantiation(data) {
//begin $.each
$.each(data.pageinfo, function (index, item) {
$("#table_body").append($('<tr class="table_tr"/>')
.append($("<td/>").html(item.name))
.append($("<td/>").html(item.desc))
.append($("<td/>").html("<img src='"+item.appImg+"' />"))
.append($("<td/>").html(item.create_time))
.append($("<td/>").html(item.update_time))
.append(
$("<td />")
.append($("<a class='yellow' id='view"+item.id+"'><i class='fa fa-eye fa-fw'></i>查看丨 </a>"))
.append($("<a class='green' id='edit"+item.id+"'><i class='fa fa-edit fa-fw'></i>編輯丨 </a>"))
.append($("<a class='red' id='delete"+item.id+"'><i class='fa fa-remove fa-fw'></i>刪除丨 </a>"))
.append($("<a class='blue' id='forbid" + item.id + "'><i class='fa fa-ban fa-fw'></i>禁用</a>"))
)
);
$("#view"+item.id).click(function() {
fillMainContent("/application/application?model=view&id="+item.id);
})
$("#edit"+item.id).click(function() {
fillMainContent("/application/application?model=edit&id="+item.id);
})
$("#delete"+item.id).click(function() {
deleteApp(item.id);
alert("刪除成功");
})
$("#forbid"+item.id).click(function() {
deleteApp(item.id);
alert("刪除成功");
getPageData(currentPage);
})
});
//end $.each
}
//獲取每頁的數據。curr:頁碼 ，curl:獲取數據的路徑。
function getPageData(url,curr) {
curr = curr-1;
$.ajax({
type: "GET",
dataType: "json",
data: {page:curr},
url: PUBLIC_BASE+url,
success: function(json) {
$('#table_body').empty();
var data = eval(json);
console.log(data);
instantiation(data);
},
error: function(json) {
var data = eval(json);
console.log(data);
}
});
}
<span style="color:#FF0000;">//調用函數實現分頁</span>
//獲取總頁數，用于初始化分頁控件總頁數
pageCount= getAllpage("/application/getAllPage");
//獲取第一頁數據
getPageData("/application/getpage",1);
//初始化分頁控件并分頁
jsonPage(pageCount,pageIndex,currentPage,getPageData,"/application/getpage");
四、參考資源
http://laypage.layui.com/
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。