Implementation effect:
Implementation method:
1. First download pageGroup.js and introduce it into the page; (jquery is also essential!)
I will put the code here:
function pageGroup(pageNum,pageCount){
switch(pageNum){
case 1:page_icon(1,5,0);break;case 2:page_icon(1,5,1);break;case pageCount-1:page_icon(pageCount-4,pageCount,3);break;case pageCount:page_icon(pageCount-4,pageCount,4);break;default:page_icon(pageNum-2,pageNum+2,2);break;}}
function page_icon(page,count,eq){
var ul_html="";for(var i=page;i<=count;i++){
ul_html+="<li>"+i+"</li>";}
$("#pageGro ul").html(ul_html);$("#pageGro ul li").eq(eq).addClass("on");}
function pageUp(pageNum,pageCount){
switch(pageNum){
case 1:break;case 2:page_icon(1,5,0);break;case pageCount-1:page_icon(pageCount-4,pageCount,2);break;case pageCount:page_icon(pageCount-4,pageCount,3);break;default:page_icon(pageNum-2,pageNum+2,1);break;}}
function pageDown(pageNum,pageCount){
switch(pageNum){
case 1:page_icon(1,5,1);break;case 2:page_icon(1,5,2);break;case pageCount-1:page_icon(pageCount-4,pageCount,4);break;case pageCount:break;default:page_icon(pageNum-2,pageNum+2,3);break;}}
function pageDown_click(pageCount,pageNum,index){
if(pageCount>5){
pageDown(pageNum,pageCount);}else{
var index=$("#pageGro ul li.on").index();if(index+1<pageCount){
$("#pageGro li").removeClass("on");$("#pageGro ul li").eq(index+1).addClass("on");}}
isPage(pageNum+1);}
function pageUp_click(pageCount,pageNum,index){
if(pageCount>5){
pageUp(pageNum,pageCount);}else{
var index=$("#pageGro ul li.on").index();if(index>0){
$("#pageGro li").removeClass("on");$("#pageGro ul li").eq(index-1).addClass("on");}}+
isPage(pageNum-1);}
function num_click(pageCount,pageNum,selector){
if(pageCount>5){
pageGroup(pageNum,pageCount);}else{
selector.addClass("on");selector.siblings("li").removeClass("on");}
isPage(pageNum);}
function icon_load(pageCount){
if(pageCount>5){
page_icon(1,5,0);}else{
page_icon(1,pageCount,0);}
isPage(1);}
function isPage(pageNum){
if(pageNum>=pageCount){
$('#pageGro .pageDown').hide();}else{
$('#pageGro .pageDown').show();}
if(pageNum<=1){
$('#pageGro .pageUp').hide();}else{
$('#pageGro .pageUp').show();}}
html
<div class="uppicmanbox mypicbox">
<ul class="upul">
<li></li>
</ul>
<div id="pageGro" class="pagebox">
<div class="pageUp" style="display: none;"> ＜ </div>
<div class="pageList">
<ul><li class="on">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div>
<div class="pageDown"> ＞ </div>
</div>
</div>
css: just the css for the pagination part
/*分页*/
#pageGro{
width:210px; height:25px;}
#pageGro div,#pageGro div ul li{
font-size:12px; color:#999; line-height:23px; float:left; margin-left:5px;}
#pageGro div ul li{
width:22px; text-align:center; border:1px solid #1970ff; cursor:pointer;color: #000;}
#pageGro div ul li.on{
color:#fff; background:#1970ff; border:1px solid #1970ff;}
#pageGro .pageUp,#pageGro .pageDown{
width:22px; text-align: center; border:1px solid #1970ff; cursor:pointer;color:#000;}
js:
showPage(1);
var pageCount;
function showPage(page){
$.ajax({
type:"GET",
url:"http://zt.xxx.com/getUploadList?page="+page,
dataType:"json",
success:function(res){
console.log(res);
if(res.code == 200){
var totalnum = res.list.count; //新闻记录的总条数
pageCount = Math.ceil(totalnum/12); //分页的总页数
var dataarr = res.list.data;
var content = '';
var pagetxt = '';
for(var i=0;i<dataarr.length;i++){
content += '<li><img src="'+ dataarr[i].img_src +'" alt=""></li>';
}
$(".mypicbox .upul").empty();
$(".mypicbox .upul").append(content);
}
}
});
}
//页面加载完成是与后台数据交互，后台返回总页数（如果只有总条数的话就自己算。Math.ceil(总条数/每条多少页)=总页数）
// var pageCount = 11;//后台返回的总页数
// icon_load(pageCount);
//点击分页按钮触发
$(document).on("click","#pageGro li",function(){
var pageNum = parseInt($(this).html());//获取当前页数
var selector = $(this);
//这里写ajax数据交互,json.html为后台，返回了总页数。实际开发中请删除json.html文件，
//$.post('json.html',{},function(rs){
//判断请求是否成功，后台一般会给一个标识。
//if(true){
showPage(pageNum);
//成功后生成分页按钮
num_click(pageCount,pageNum,selector);
//}else{
//alert('这里就表示获取后台的数据失败了');
//}
//},'json');
});
//点击上一页触发
$(document).on("click","#pageGro .pageUp",function(){
var pageNum = parseInt($("#pageGro li.on").html());//获取当前页
var index = $("#pageGro ul li.act").index();//获取index
//这里写ajax数据交互,json.html为后台，返回了总页数。实际开发中请删除json.html文件，
//$.post('json.html',{},function(rs){
//判断请求是否成功，后台一般会给一个标识。
//if(true){
showPage(pageNum);
//成功后生成分页按钮
pageUp_click(pageCount,pageNum,index);
//}else{
//alert('这里就表示获取后台的数据失败了');
//}
//},'json');
});
//点击下一页触发
$(document).on("click","#pageGro .pageDown",function(){
var pageNum = parseInt($("#pageGro li.on").html());//获取当前页
var index = $("#pageGro ul li.act").index();//获取index
//这里写ajax数据交互,json.html为后台，返回了总页数。实际开发中请删除json.html文件，
//$.post('json.html',{},function(rs){
//判断请求是否成功，后台一般会给一个标识。
//if(true){
showPage(pageNum);
//成功后生成分页按钮
pageDown_click(pageCount,pageNum,index);
//}else{
//alert('这里就表示获取后台的数据失败了');
//}
//},'json');
});
Plug-in link: jQuery paging plug-in pageGroup.js, supports ie7 and above versions