一个简单的js分页,须后台配合返回分页信息,js文件只是处理实现分页显示,由于很多时候有些功能需要定制,所以用第三方插件或网上找的些代码调试起来很麻烦,所以还是自己动手吧
默认样式用的bootstrap,所以需要加载bootstrap.css,同时需要加载jQuery
html代码里面分页位置只需放一个ul:<ul class="pagination"></ul>
js代码:
/**
*
* 参数obj包含字段
*"obj":{
"page":"2", //当前页 (必须)
"rows":1, //每页显示条数
"next":3, //下一页 (必须)
"pre":1, //上一页 (必须)
"last_page":7, //最后一页|总页数
"is_more":true, //是否有下一页
"limit":"1,1", //查询数据limit字符串
"total":7 //总数据条数
}
*
* @param method 请求分页数据方法
*
* demo:
*
* 分页:
* <ul class="pagination"></ul>
*
* @param page 请求第page页的数据集合,附带返回分页信息obj
请求分页数据
* function get_page(page){
* $.post("list.php",{page:page},function(re){
* //返回数据格式举例
* { "list":{//数据集合}
* "obj":{
"page":"2", //当前页 (必须)
"rows":1, //每页显示条数
"next":3, //下一页 (必须)
"pre":1, //上一页 (必须)
"last_page":7, //最后一页|总页数
"is_more":true, //是否有下一页
"limit":"1,1", //查询数据limit字符串
"total":7 //总数据条数
}
* }
*
* //处理数据集合
* 。。。。。。
*
* //调用分页方法
*
* structure_page(re.obj,'get_page');
* })
* }
*
* 第一次进入页面默认请求第一页数据。
*
* get_page(1);
* */
var show_page=1; //偏移量,举例设为1,当前页为3,那么分页显示为2,3,4
function structure_page(obj,method){
var html='';
var cla_pre=obj.page>1?'':'disabled';
html+="<li class='"+cla_pre+"'><a href='javascript:"+method+"("+obj.pre+")'>上一页</a></li>";
if(show_page>=obj.last_page){
for(var i=1;i<=obj.last_page;i++){
var cla=i==obj.page?'active':'';
html+="<li class='"+cla+"'><a href='javascript:"+method+"("+i+")'>"+i+"</a></li>";
}
}else{
for(var i=obj.page*1-show_page*1;i<=obj.page*1+show_page*1;i++){
var cla=i==obj.page?'active':'';
if(i>0 && i<=obj.last_page){
html+="<li class='"+cla+"'><a href='javascript:"+method+"("+i+")'>"+i+"</a></li>";
}
}
}
var cla_next=obj.page<obj.last_page?'':'disabled';
html+="<li class='"+cla_next+"'><a href='javascript:"+method+"("+obj.next+")'>下一页</a></li>";
$('.pagination').html('');
$('.pagination').append(html);
}
后台一个分页处理方法,用于向前台返回分页信息,此方法是写在tp5里面,所以参数获取用的tp5里面的方法:
/**
* 分页函数
* @param $total 数据总条数
* @param $page 当前页
* @param $rows 每页显示多少条
* @param $next 下一页
* @param $pre 上一页
* @param $last_page 总页数,最后一页
* @param $is_more 是否有下一页
* @param $limit 数据查询拼接limit
*/
function page($total=0){
$parm=request()->param();
$is_more=true;
$rows=isset($parm['rows'])?$parm['rows']:1;
$page=isset($parm['page'])?$parm['page']:1;
$last_page=ceil($total/$rows);
if($page>=$last_page) $is_more=false;
if($page>$last_page) $page=$last_page;
$first_limit=($page-1)*$rows;
if($last_page==0){
$rows=$first_limit=0;
}
$limit=$first_limit.','.$rows;
$next=($page+1)>$last_page?$last_page:$page+1;
$pre=($page-1)<1?1:$page-1;
return [
'page'=>$page,
'rows'=>$rows,
'next'=>$next,
'pre'=>$pre,
'last_page'=>$last_page,
'is_more'=>$is_more,
'limit'=>$limit,
'total'=>$total
];
}