tp5,ajax jquery 实现分页

1，html，css 部分,自行引入jquery

.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>

2，js 部分

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>";
}

扫描二维码关注公众号，回复： 4298951 查看本文章

//显示的页码按钮
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'){

// $("#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，效果图

tp5,ajax jquery 实现分页

猜你喜欢