tp5.0手寫ajax列表分頁
阿新 • • 發佈：2018-10-31
1:檢視層
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<style>
#pageBar {
text-align: right;
padding: 0 20px 20px 0;
}
.pageBtn a {
display: inline-block;
border: 1px solid #aaa;
padding: 2px 5px;
margin: 0 3px;
font-size: 13px;
background: #ECECEC;
color: black;
text-decoration: none;
-moz-border-radius: 2px;
-webkit-border-radius: 3px;
}
.pageBtn-selected a {
display: inline-block;
border: 1px solid #aaa;
padding: 2px 5px;
margin: 0 3px;
font-size: 13px;
background: #187BBD;
color: white;
text-decoration: none;
-moz-border-radius: 2px;
-webkit-border-radius: 3px;
}
.pageBtn a:hover {
background: #187BBD;
color: white;
}
</style><!--商品列表開始-->
<div class="jumbotron">
<div id="data-area">
<!--這裡新增分頁資料--> <ul> </ul>
</div>
<div id="pageBar"><!--這裡新增分頁按鈕欄--></div>
<!--商品列表開始-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var curPage; //當前頁數
var totalItem; //總記錄數
var pageSize; //每一頁記錄數
var totalPage; //總頁數
//獲取分頁資料
function turnPage(page) {
$.ajax({
type: 'get',
url: 'goods', //這裡是請求的後臺地址，自己定義
data: {'curPage': page},
dataType: 'json',
beforeSend: function () {
$("#data-area ul").append("載入中...");
},
success: function (data) {
$("#data-area ul").empty(); //移除原來的分頁資料
totalItem = data.data.totalItem; // 返回的總記錄數
pageSize = data.data.pageSize; //返回的每一頁記錄數
curPage = page; //返回的當前頁碼
totalPage = data.data.totalPage; //返回的總頁數
var data_content = data.data.data_content; //返回的資料內容
var data_html = ""; //資料輸出的html程式碼
//新增新的分頁資料（資料的顯示樣式根據自己頁面來設定，這裡只是一個簡單的列表）
$.each(data_content, function (index, array) {
data_html += "<li style='list-style-type:none;'>" + "<input name='checkbox' type='checkbox' value="+array['id']+" />"+array['id'] + " " + array['title'] + " " + array['zk_final_price'] +"<img src="+ array['pict_url'] +" style='width:50px;height:50px;'/>"+ "</li>";
}); //遍歷資料，形成html程式碼
$("#data-area ul").append(data_html); //輸出html程式碼
getPageBar();
},
/* complete: function() { //新增分頁按鈕欄
getPageBar();
},*/
error: function () {
alert("資料載入失敗");
}
});
}
/* curPage; //當前頁數
totalItem; //總記錄數
pageSize; //每一頁記錄數
totalPage; //總頁數
*/
//獲取分頁條（分頁按鈕欄的規則和樣式根據自己的需要來設定）
function getPageBar() {
//防止資料錯誤時候出現當前頁數大於總頁數
if (curPage > totalPage) {
curPage = totalPage;
}
//防止資料錯誤時候出現當前頁數小於第一頁
if (curPage < 1) {
curPage = 1;
}
//定義分頁按鈕html程式碼
pageBar = "";
//如果不是第一頁
if (curPage != 1) {
pageBar += "<span class='pageBtn'><a href='javascript:turnPage(1)'>首頁</a></span>";
pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+(curPage-1)+")'>上一頁</a></span>";
}
//顯示的頁碼按鈕(5個)
//定義start 和end兩個變數準備迴圈輸出可見的分頁按鈕
var start, end;
if (totalPage <= 5) {
start = 1;
end = totalPage;
} else {
//當前頁碼與總頁數相差1個的時候，要顯示之前的頁碼
if (totalPage - curPage < 2) {
start = totalPage - 4;
end = totalPage;
} else {
//顯示前面兩個和後面兩個
start = curPage - 2;
end = curPage + 2;
}
}
//如果不是最後頁,顯示輸出“下一頁 ， 末頁”
if (curPage != totalPage) {
pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + (parseInt(curPage) + 1) + ")'>下一頁</a></span>";
pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + totalPage + ")'>末頁</a></span>";
}
//匹配改變pageBar裡面的內容
$("#pageBar").html(pageBar);
}
//頁面載入時初始化分頁
$(function () {
turnPage(1);
});
</script>2:控制器裡
public function goods(){
if(request()->isAjax()){
//1.獲取資料（curPage）
$page=input('get.');
$curPage = $page['curPage'];
//2.定義分頁所需的資料
$totalItem = Tbgoods::count(); //總記錄數(自行定義)
$pageSize='10'; //每一頁記錄數(自行定義)
$totalPage =ceil($totalItem/$pageSize); //總頁數
$startItem = ($curPage-1) * $pageSize;//根據頁碼來決定查詢資料的節點
//3.查詢資料
$res=Tbgoods::limit($startItem,$pageSize)
->select();
//4.放入所有資料
$arr['totalItem']=$totalItem;
$arr['pageSize']=$pageSize;
$arr['totalPage']=$totalPage;
foreach($res as $lab) {
$arr['data_content'][] = $lab;
}
//5.結果返回（此處沒有判定是否查詢成功）
$this->result($arr,'1','成功','json');
}
}