tp5,ajax jquery 實現分頁
1，html，css 部分,自行引入jquery
<style>
.table-bg{border-collapse:collapse !important;}
.table-bg th{border-bottom-width: 0px !important;}
#pageBar {
float: left;
text-align: right;
padding: 0 20px 20px 0;
}
.pageBtn a {
min-width: 34px;
height: 35px;
border: 1px solid #dce0e0!important;
text-align: center;
/*margin-left:-5px;*/
cursor: pointer;
line-height: 33px;
color: #666666;
font-size: 13px;
display: inline-block;
}
.pageBtn-selected a {
background-color: #428bca;
border-color: #428bca;
color: #FFFFFF;
min-width: 34px;
height: 35px;
border: 1px solid #428bca!important;
text-align: center;
/*margin-left: -5px;*/
cursor: pointer;
line-height: 33px;
font-size: 13px;
display: inline-block;
}
.pageBtn a:hover {
background: #ddd;
/*color: white;*/
text-decoration: none;
}
.pageBtn-selected a:hover {
/*background: #ddd;*/
/*color: white;*/
text-decoration: none;
}
</style>
<body>
<div class="row">
<div class="col-sm-4" style="margin-left:20px;width:20%">
<div id="treeview-checkable" class=""></div>
<input type="hidden" id="menu_id" value="">
</div>
<div class="page-container" style="width:78%;float:left;padding:0px;padding-right:20px;">
<table class="table table-border table-bordered table-bg" id="table_list">
<thead>
<tr class="text-c">
<th>ID</th>
<th>登入賬號</th>
<th>工號</th>
<th>姓名</th>
<th>性別</th>
<th>手機</th>
</tr>
</thead>
<tbody id="tbody_list">
</tbody>
<div id="list_show" style="color: red;position: absolute;z-index: 100;top: 150px;background: #fff; display:none;text-align:center">暫無資料。。。</div>
</table>
<div id="pageBar"><!--這裡新增分頁按鈕欄--></div>
</div>
</div>
2，js 部分
<script type="text/javascript">
turnPage(1);
function turnPage(page) {
$("#menu_id").val(data.permission_id);
$.ajax({
type: 'POST',
data:{id:$("#menu_id").val(),'curPage': page},
// url: '/admin.php/User/ajaxGetList',
url: '/admin.php/User/user_list',
dataType: 'json',
success: function(data){
//console.log(data);
if (data.status=='ok'){
$("#tbody_list").html('');
$(".count").html('');
$(".page_div").html('');
$("#list_show").hide();
var list = "";
for (var i=0;i<data.info.length;i++){
list +='<tr class="text-c">';
list +='<td>'+data.info[i].id+'</td>';
list +='<td>'+data.info[i].account+'</td>';
list +='<td>'+data.info[i].code+'</td>';
list +='<td>'+data.info[i].realname+'</td>';
list +='<td>'+data.info[i].gender+'</td>';
list +='<td>'+data.info[i].mobile+'</td>';
list +='</tr">';
}
$("#tbody_list").empty('');
$("#table_list tbody").append(list);
totalItem = data.page.totalItem; // 返回的總記錄數
pageSize = data.page.pageSize; //返回的每一頁記錄數
curPage = page; //返回的當前頁碼
totalPage = data.page.totalPage; //返回的總頁數
//調取分頁方法
getPageBar();
}else{
$(".count").html('');
$(".page_div").html('');
$("#table_list tbody").empty('');
$("#list_show").show();
}
}
});
}
/* 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:request_page(1)'>首頁</a></span>";
pageBar += "<span class='pageBtn'><a href='javascript:request_page("+(curPage-1)+")'> << </a></span>";
}
//顯示的頁碼按鈕
if(totalPage > 6) {
//當前頁數小於5時顯示省略號
if(curPage < 5) {
for(var i = 1; i < 6; i++) {
if(curPage == i) {
pageBar += "<span class='pageBtn-selected'><a href='javascript:request_page(" + i + ")'>" + i + "</a></span>";
} else {
pageBar += "<span class='pageBtn'><a href='javascript:request_page(" + i + ")'>" + i + "</a></span>";
}
}
pageBar += "<span class='pageBtn'><a href='javascript:void(0)' style='text-decoration: none;'>...</a></span>";
pageBar += "<span class='pageBtn'><a href='javascript:request_page(" + totalPage + ")'>" + totalPage + "</a></span>";
} else {
//判斷頁碼在末尾的時候
if(curPage < totalPage - 3) {
for(var i = curPage - 2; i < curPage + 3; i++) {
if(curPage == i) {
pageBar += "<span class='pageBtn-selected'><a href='javascript:request_page(" + i + ")'>" + i + "</a></span>";
} else {
pageBar += "<span class='pageBtn'><a href='javascript:request_page(" + i + ")'>" + i + "</a></span>";
}
}
pageBar += "<span class='pageBtn'><a href='javascript:void(0)' style='text-decoration: none;'>...</a></span>";
pageBar += "<span class='pageBtn'><a href='javascript:request_page(" + totalPage + ")'>" + totalPage + "</a></span>";
//頁碼在中間部分時候
} else {
pageBar += "<span class='pageBtn'><a href='javascript:request_page(1)'>1</a></span>";
pageBar += "<span class='pageBtn'><a href='javascript:void(0)' style='text-decoration: none;'>...</a></span>";
for(var i = totalPage - 4; i < totalPage + 1; i++) {
if(curPage == i) {
pageBar += "<span class='pageBtn-selected'><a href='javascript:request_page(" + i + ")'>" + i + "</a></span>";
} else {
pageBar += "<span class='pageBtn'><a href='javascript:request_page(" + i + ")'>" + i + "</a></span>";
}
}
}
}
//頁面總數小於6的時候
} else {
for(var i = 1; i < totalPage + 1; i++) {
if(curPage == i) {
pageBar += "<span class='pageBtn-selected'><a href='javascript:request_page(" + i + ")'>" + i + "</a></span>";
} else {
pageBar += "<span class='pageBtn'><a href='javascript:request_page(" + i + ")'>" + i + "</a></span>";
}
}
}
//如果不是最後頁,顯示輸出“下一頁 ， 末頁”
if (curPage != totalPage) {
pageBar += "<span class='pageBtn'><a href='javascript:request_page(" + (parseInt(curPage) + 1) + ")'> >> </a></span>";
// pageBar += "<span class='pageBtn'><a href='javascript:request_page(" + totalPage + ")'>末頁</a></span>";
}
//匹配改變pageBar裡面的內容
$("#pageBar").html(pageBar);
}
//頁數請求方法
function request_page(page){
$.ajax({
type: 'POST',
data:{id:$("#menu_id").val(),'curPage': page},
// url: '/admin.php/User/ajaxGetList',
url: '/admin.php/User/user_list',
dataType: 'json',
success: function(data){
console.log(data);
if (data.status=='ok'){
$("#tbody_list").html('');
$(".count").html('');
$(".page_div").html('');
$("#list_show").hide();
var list = "";
for (var i=0;i<data.info.length;i++){
list +='<tr class="text-c">';
list +='<td>'+data.info[i].id+'</td>';
list +='<td>'+data.info[i].account+'</td>';
list +='<td>'+data.info[i].code+'</td>';
list +='<td>'+data.info[i].realname+'</td>';
list +='<td>'+data.info[i].gender+'</td>';
list +='<td>'+data.info[i].mobile+'</td>';
list +='</tr">';
}
$("#tbody_list").empty('');
$("#table_list tbody").append(list);
// $("#data-area ul").empty(); //移除原來的分頁資料
totalItem = data.page.totalItem; // 返回的總記錄數
pageSize = data.page.pageSize; //返回的每一頁記錄數
curPage = page; //返回的當前頁碼
totalPage = data.page.totalPage; //返回的總頁數
getPageBar();
}else{
$(".count").html('');
$(".page_div").html('');
$("#table_list tbody").empty('');
$("#list_show").show();
}
}
});
}
</script>
3 ， PHP 部分
//使用者管理列表頁
public function user_list(){
if(isset($_REQUEST['id'])){
//1.獲取資料（curPage）
$curPage = $_REQUEST['curPage'];
//2.定義分頁所需的資料
//總記錄數(自行定義)
$totalItem = Db::table('table_a')
->alias('o')
->join('table_b u','o.id = u.organize_id')
->join('table_c w','w.user_id = u.id')
->where('o.id = '.$_REQUEST['id'])
->field('o.fullname,u.*')
->order('u.id desc')
->count();
//每一頁記錄數(自行定義)
$pageSize = '2';
//總頁數
$totalPage = ceil($totalItem/$pageSize);
//根據頁碼來決定查詢資料的節點
$startItem = ($curPage-1) * $pageSize;
$model = Db::table('table_a')
->alias('o')
->join('table_b u','o.id = u.organize_id')
->join('table_c w','w.user_id = u.id')
->where('o.id = '.$_REQUEST['id'])
->field('o.fullname,u.*')
->order('u.id desc')
->limit($startItem,$pageSize)
->select();
$page['totalItem'] = $totalItem;
$page['pageSize'] = $pageSize;
$page['totalPage'] = $totalPage;
if (!empty($model)) {
$arr = array('status' => "ok", 'Code' => "1", 'info' => $model,'page'=>$page);
}else{
$arr = array('status' => "nok", 'Code' => "1", 'info' => "暫無資料");
}
return json($arr);
}
4，效果圖
