前提需要引入jquery:
/**
* 自定义分页
* @param wrapId 最外层选择器
* @param count 总计数量
* @param rows 每页显示数量
* @param totalP 总页数
* @param currP 当前页
* @param func 翻页回调函数
* @returns
*/
function createPage(wrapId,count,rows,totalP,currP,func){
totalP = Number(totalP);
currP = Number(currP);
var inputs = '', inner = '', prevStr = '', nextStr = '', pageList = '';
var minP,maxP;
inner = '<ul style="display: inline-block;vertical-align: middle;">';
inputs = '<input value="'+count+'" type="hidden" name="count" class="count">'
+'<input value="'+rows+'" type="hidden" name="rows" class="rows">'
+'<input value="'+totalP+'" type="hidden" name="totalP" class="totalP">'
+'<input value="'+currP+'" type="hidden" name="currP" class="currP">';
prevStr = '<li style="float: left;"><a href="javascript:'+func+'(\''+wrapId+'\',\''+count+'\',\''+rows+'\',\''+totalP+'\',\''+(currP-1)+'\',\''+func+'\');" class="prev ">上一页</a></li>'
+'<li style="float: left;"><a href="javascript:'+func+'(\''+wrapId+'\',\''+count+'\',\''+rows+'\',\''+totalP+'\',\''+1+'\',\''+func+'\');" class="firstP">首页</a></li>';
nextStr = '<li style="float: left;"><a href="javascript:'+func+'(\''+wrapId+'\',\''+count+'\',\''+rows+'\',\''+totalP+'\',\''+totalP+'\',\''+func+'\');" class="lastP">尾页</a></li>'
+'<li style="float: left;"><a href="javascript:'+func+'(\''+wrapId+'\',\''+count+'\',\''+rows+'\',\''+totalP+'\',\''+(currP+1)+'\',\''+func+'\');" class="next">下一页</a></li>';
if(totalP<=10){
minP = 1;
maxP = totalP;
}else{
if(currP<=6){
minP = 1;
maxP = 10;
}else{
if((currP+4)<totalP){
minP = currP-5;
maxP = currP+4;
}else{
minP = totalP-9;
maxP = totalP;
}
}
}
// console.log('totalP:'+totalP+';currP:'+currP+';minP:'+minP+';maxP:'+maxP);
for(var i=minP; i<=maxP; i++){
if(i == currP){
pageList += '<li style="float: left;"><a href="javascript:'+func+'(\''+wrapId+'\',\''+count+'\',\''+rows+'\',\''+totalP+'\',\''+i+'\',\''+func+'\');" class="active">'+i+'</a></li>';
}else{
pageList += '<li style="float: left;"><a href="javascript:'+func+'(\''+wrapId+'\',\''+count+'\',\''+rows+'\',\''+totalP+'\',\''+i+'\',\''+func+'\');" class="">'+i+'</a></li>';
}
}
inner += prevStr + pageList + nextStr;
inner += '</ul>';
inner += inputs;
$(wrapId).html(inner);
//css样式
$(wrapId).css({
'text-align':'center',
'padding':'10px'
});
$(wrapId).find('a').css({
'height': '34px',
'min-width':'40px',
'width': '40px',
'line-height': '32px',
'border': '1px solid #ddd',
'border-right-width': '0',
'font-size': '12px',
'display': 'inline-block',
'text-decoration-line': 'none',
'color': '#168dd1'
});
$(wrapId).find('a.prev,a.firstP,a.lastP,a.next').css({
'width':'auto',
'padding':'0 15px'
});
$(wrapId).find('a.prev').css({
'border-top-left-radius':'4px',
'border-bottom-left-radius':'4px'
});
$(wrapId).find('a.next').css({
'border-top-right-radius':'4px',
'border-bottom-right-radius':'4px',
'border-right-width':'1px'
});
$(wrapId).find('a').hover(function(){
$(this).css('background','#eee');
},function(){
$(this).css('background','transparent');
});
$(wrapId).find('a.active').css({
'background':'#168dd1',
'color':'#fff'
});
$(wrapId).find('a.disabled').css({
'background':'transparent',
'color':'#ddd',
'cursor':'not-allowed'
});
if(currP<2){
$(wrapId).find('.prev').addClass('disabled');
$(wrapId).find('.firstP').addClass('disabled');
}
if(currP == totalP){
$(wrapId).find('.lastP').addClass('disabled');
$(wrapId).find('.next').addClass('disabled');
}
}
/**
* 翻页
* @param wrapId
* @param count
* @param rows
* @param totalP
* @param currP
* @param func
* @returns
*/
function pageTurn(wrapId,count,rows,totalP,currP,func){
totalP = Number(totalP);
currP = Number(currP);
if(currP<1){
currP = 1;
}
if(currP>totalP){
currP = totalP;
}
createPage(wrapId,count,rows,totalP,currP,func);
console.log('当前第 '+currP+' 页');
}