一、背景
在使用thinkPHP框架做項(xiàng)目的時(shí)候，經(jīng)常會(huì)遇到對(duì)列表的內(nèi)容進(jìn)行分頁(yè)。thinkPHP框架中自帶了分頁(yè)功能，但是有缺陷。這個(gè)缺陷是每次返回每頁(yè)數(shù)據(jù)給頁(yè)面時(shí)需要重新加載頁(yè)面所需要的JS、CSS等資源。如果頁(yè)面包含的JS過(guò)多、過(guò)大，會(huì)增加流量壓力。因此，我們使用laypage插件。每次使用ajax請(qǐng)求獲取每頁(yè)的數(shù)據(jù)就可以了，不需要重復(fù)加載頁(yè)面。
二、分頁(yè)流程
如下圖所示：
流程說(shuō)明：
1) 調(diào)研App.php中的函數(shù)，該函數(shù)調(diào)用fetch函數(shù)。fetch函數(shù)渲染list.html.
2) list.html 調(diào)用獲取總頁(yè)數(shù)的函數(shù)，并得到總頁(yè)數(shù)。
3) 獲取第一頁(yè)數(shù)據(jù)。
4)初始化laypage分頁(yè)插件。
5)點(diǎn)擊頁(yè)碼，觸發(fā)分頁(yè)查詢。
三、實(shí)現(xiàn)分頁(yè)功能相關(guān)的代碼
1、App.php Controller的代碼
//fetch渲染頁(yè)面
public function index()
{
return $this->fetch('list');
}
//根據(jù)頁(yè)面?zhèn)魅氲捻?yè)碼查詢數(shù)據(jù)
public function getPage()
{
span style="color:#FF0000;">// 獲取頁(yè)面?zhèn)魅氲捻?yè)碼 /span>
$nowpage = input("page");
//每頁(yè)顯示10條數(shù)據(jù)
$limits = 10;
$app = new appInfo();
$page_info = $app->limit(($nowpage * $limits), $limits)->select();
// ajax 分頁(yè)輸出
$info = ['pageinfo'=>$page_info,'nowpage'=>$nowpage,'nowpage'=>$nowpage];
return json($info);
}
//獲取所有頁(yè)數(shù)
public function getAllPage(){
try{
$count = appInfo::count();
$limits = 10;
// 計(jì)算總頁(yè)面
$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>應(yīng)用名稱/th>
th>應(yīng)用類型/th>
th>應(yīng)用圖像/th>
th>創(chuàng)建日期/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>丨添加應(yīng)用
/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：總頁(yè)數(shù)。用于初始化laypage分頁(yè)控件。
//pageIndex：初始化當(dāng)前頁(yè)。顯示第一頁(yè)。
//currentPage：當(dāng)前頁(yè)數(shù)。
//getPageData:獲取每頁(yè)數(shù)據(jù)的函數(shù)。
//url:獲取每頁(yè)數(shù)據(jù)的方法的路徑。由控制器和函數(shù)名組成。
function jsonPage(pageCount, pageIndex,currentPage, getPageData,url) {
var laypageindex = laypage({
cont: 'result', //容器。值支持id名、原生dom對(duì)象，jquery對(duì)象。
skin: '#3c8dbc',
pages: pageCount, //通過(guò)后臺(tái)拿到的總頁(yè)數(shù)
curr: pageIndex, //初始化當(dāng)前頁(yè)
prev: '上一頁(yè)', //若不顯示，設(shè)置false即可
next: '下一頁(yè)', //若不顯示，設(shè)置false即可
skip: true, //是否開(kāi)啟跳頁(yè)
jump: function (obj, first) { //觸發(fā)分頁(yè)后的回調(diào)
//getPageData(1);
if (!first) { //點(diǎn)擊跳頁(yè)觸發(fā)函數(shù)自身，并傳遞當(dāng)前頁(yè)：obj.curr
getPageData(url,obj.curr);
currentPage = obj.curr;
}
}
});
}
/url:獲取總頁(yè)數(shù)據(jù)的方法的路徑。由控制器和函數(shù)名組成。
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:每頁(yè)的數(shù)據(jù)。由JSON對(duì)象組成。
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=viewid="+item.id);
})
$("#edit"+item.id).click(function() {
fillMainContent("/application/application?model=editid="+item.id);
})
$("#delete"+item.id).click(function() {
deleteApp(item.id);
alert("刪除成功");
})
$("#forbid"+item.id).click(function() {
deleteApp(item.id);
alert("刪除成功");
getPageData(currentPage);
})
});
//end $.each
}
//獲取每頁(yè)的數(shù)據(jù)。curr:頁(yè)碼 ，curl:獲取數(shù)據(jù)的路徑。
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;">//調(diào)用函數(shù)實(shí)現(xiàn)分頁(yè)/span>
//獲取總頁(yè)數(shù)，用于初始化分頁(yè)控件總頁(yè)數(shù)
pageCount= getAllpage("/application/getAllPage");
//獲取第一頁(yè)數(shù)據(jù)
getPageData("/application/getpage",1);
//初始化分頁(yè)控件并分頁(yè)
jsonPage(pageCount,pageIndex,currentPage,getPageData,"/application/getpage");
四、參考資源
http://laypage.layui.com/
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- thinkphp框架使用JWTtoken的方法詳解
- PHP如何使用JWT做Api接口身份認(rèn)證的實(shí)現(xiàn)
- php實(shí)現(xiàn)JWT(json web token)鑒權(quán)實(shí)例詳解
- PHP JWT初識(shí)及其簡(jiǎn)單示例
- php JWT在web端中的使用方法教程
- php 后端實(shí)現(xiàn)JWT認(rèn)證方法示例
- thinkPHP5使用Rabc實(shí)現(xiàn)權(quán)限管理
- Thinkphp5框架使用validate實(shí)現(xiàn)驗(yàn)證功能的方法
- thinkphp5使用bootstrapvalidator進(jìn)行異步驗(yàn)證郵箱的示例
- 基于ThinkPHP5框架使用QueryList爬取并存入mysql數(shù)據(jù)庫(kù)操作示例
- ThinkPHP5框架中使用JWT的方法示例
