<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>page</title>
</head>
<style>
*{margin: 0;padding: 0;}
#page{
height: 40px;
border: 1px solid #777;
margin: 200px auto;
box-sizing: border-box;
padding: 3px 10px;
}
.prev,.next{
cursor: pointer;
}
#page a{
display: inline-block;
vertical-align: top;
padding: 0 20px;
height: 28px;
line-height: 28px;
margin-right: -1px;
color: #333;
font-size: 12px;
border: 1px solid #e2e2e2;
text-decoration: none;
}
.active{
background: #009688;
color: #fff!important;
border: 1px solid #009688!important;
}
.disabled{
color: #d2d2d2!important;
cursor: not-allowed!important;
}
.first,.last{
padding: 0 10px!important;
}
.count{
display: inline-block;
vertical-align: top;
height: 28px;
line-height: 28px;
background-color: #fff;
color: #333;
font-size: 12px;
margin-left: 10px;
margin-right: 10px;
padding: 0;
border: none;
}
.page-limit{
display: inline-block;
vertical-align: middle;
height: 28px;
line-height: 28px;
margin: 0 -1px 5px 9px;
background-color: #fff;
color: #333;
font-size: 12px;
}
.page-limit select{
height: 22px;
padding: 3px;
border-radius: 2px;
cursor: pointer;
border: 1px solid #e2e2e2;
box-sizing: content-box;
font-size: 12px;
}
.page-skip{
display: inline-block;
vertical-align: middle;
height: 30px;
line-height: 30px;
color: #999;
margin-left: 10px;
margin: 0 -1px 5px 10px;
background-color: #fff;
color: #333;
font-size: 12px;
}
.page-input{
display: inline-block;
width: 40px;
margin: 0 10px;
padding: 0 3px;
text-align: center;
height: 30px;
line-height: 30px;
border-radius: 2px;
vertical-align: top;
background-color: #fff;
box-sizing: border-box;
border: 1px solid #e2e2e2;
outline: none;
}
.page-btn{
margin-left: 10px;
padding: 0 10px;
cursor: pointer;
height: 30px;
line-height: 30px;
border-radius: 2px;
vertical-align: top;
background-color: #fff;
box-sizing: border-box;
border: 1px solid #e2e2e2;
outline: none;
}
</style>
<body>
<div id="page"></div>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
"use strict";
function initPage(elem,num,isFL,isCount,isLimit,isSkip,limitCount,pageSizeList){
//页数计算
var page=Math.ceil(num/limitCount);
var a,b,c,d,f,html;
if(isFL){
a='<a href="javascript:;" class="first disabled">首页</a>';
if(page>1){ b='<a href="javascript:;" class="last">末页</a>';
}else{
b='<a href="javascript:;" class="last disabled">末页</a>';
}
}else{
a=b='';
}
if(isCount){
c='<span class="count">共 '+num+' 条</span>';
}else{
c='';
}
if(isLimit){
d='<span class="page-limit"><select>'+
'<option value="'+pageSizeList[0]+'" selected>'+pageSizeList[0]+' 条/页</option>'+
'<option value="'+pageSizeList[1]+'">'+pageSizeList[1]+' 条/页</option>'+
'<option value="'+pageSizeList[2]+'">'+pageSizeList[2]+' 条/页</option>'+
'<option value="'+pageSizeList[3]+'">'+pageSizeList[3]+' 条/页</option>'+
'<option value="'+pageSizeList[4]+'">'+pageSizeList[4]+' 条/页</option>'+
'</select></span>';
}else{
d='';
}
if(isSkip){
f='<span class="page-skip">'+
'到第<input type="text" class="page-input" value="1">页'+
'<button class="page-btn">确定</button>'
'</span>'
;
}else{
f='';
} if(page==0){
html=a+'<a href="javascript:;" class="prev disabled">上一页</a><a href="javascript:;" class="next disabled">下一页</a>'+b+c+d+f;
}
if(page==1){
html=a+'<a href="javascript:;" class="prev disabled">上一页</a>'+
'<a href="javascript:;" data-page="1" class="numpage active" islast="true">1</a>'+
'<a href="javascript:;" class="next disabled">下一页</a>'+b+c+d+f;
}
if(page>1){
html=a+'<a href="javascript:;" class="prev disabled" data-page="0">上一页</a>'+
'<a href="javascript:;" data-page="1" class="numpage active" islast="false">1</a>';
for(var i=2;i<page+1;i++){
var last="false";
if(i==page){
last="true";
}
html+=`<a href="javascript:;" class="numpage" data-page="${i}" islast="${last}">${i}</a>`;
}
html+='<a href="javascript:;" class="next" data-page="2" >下一页</a>'+b+c+d+f;
}
$('#'+elem).html(html);
$('.page-limit select').find('option[value="'+limitCount+'"]').attr('selected','selected');
}
function getDomByAttr(arr,key,value){
var dom='';
for(var i=0;i<arr.length;i++){
if(arr[i].getAttribute(key) == value){
dom=(arr[i]);
break;
}
}
return dom;
}
var initConfig=function(ele,options){
var initDom=ele;
var options=options===undefined?{}:options;
var count=options.count===undefined?0:options.count;
var isFL=options.isFL===undefined?false:options.isFL;
var isCount=options.isCount===undefined?false:options.isCount;
var isLimit=options.isLimit===undefined?false:options.isLimit;
var isSkip=options.isSkip===undefined?false:options.isSkip;
var pageSizeList=options.pageSizeList===undefined?[10,20,30,40,50]:options.pageSizeList;
var limitCount=options.limitCount===undefined?pageSizeList[0]:options.limitCount;
var jump=options.jump===undefined?null:options.jump(options);
initPage(initDom,count,isFL,isCount,isLimit,isSkip,limitCount,pageSizeList);
$('#'+initDom).on('click','a',function(){ //点击的做判断
if($(this).is('.prev')){
//上一页
if($(this).next().is('.next')){
return false;
}
if($(this).is('.disabled')){
return false;
}else{
$('.next,.last').removeClass('disabled');
if($(this).attr('data-page') == 1){
$('.prev,.first').addClass('disabled');
}
var aDom=document.querySelectorAll('.numpage');
var addDom=getDomByAttr(aDom,'data-page',$(this).attr('data-page'));
var resDom=getDomByAttr(aDom,'data-page',parseInt($(this).attr('data-page'))+1);
if($('.active').attr('data-page') == 1){ return false;
}
$('.next').attr('data-page',$('.active').attr('data-page'));
$(resDom).removeClass('active');
$(addDom).addClass('active');
$('.prev').attr('data-page',parseInt($(this).attr('data-page'))-1);
}
}else if($(this).is('.next')){
if($(this).prev().is('.prev')){
return false;
}
//下一页 var aDom=document.querySelectorAll('.numpage');
var addDom=getDomByAttr(aDom,'data-page',$(this).attr('data-page'));
var resDom=getDomByAttr(aDom,'data-page',parseInt($(this).attr('data-page'))-1);
if($('.active').attr('islast') == "true"){
return false;
}
$('.prev').attr('data-page',$('.active').attr('data-page'));
$(resDom).removeClass('active');
$(addDom).addClass('active');
$('.next').attr('data-page',parseInt($(this).attr('data-page'))+1);
$('.prev,.first').removeClass('disabled');
if($('.active').attr('islast') == 'true'){
$('.next,.last').addClass('disabled');
}else{
$('.next,.last').removeClass('disabled');
}
}else if($(this).is('.numpage')){
//页数
$(this).addClass('active').siblings('.numpage').removeClass('active');
$('.next').attr('data-page',parseInt($(this).attr('data-page'))+1);
$('.prev').attr('data-page',$(this).attr('data-page')-1); if($(this).attr('data-page') == 2 && $(this).attr('islast') == "true"){//2页来回点
$('.prev,.first').removeClass('disabled');
$('.next,.last').addClass('disabled');
}else if($(this).attr('data-page') == 1 && $(this).attr('islast') == "false"){//2页来回点
$('.prev,.first').addClass('disabled');
$('.next,.last').removeClass('disabled');
}else if($(this).attr('data-page')>=2 && $(this).attr('islast')=="false"){//大于2页来回点
$('.prev,.next,.first,.last').removeClass('disabled');
}else if($(this).attr('data-page')>=2 && $(this).attr('islast')=="true"){
$('.prev,.first').removeClass('disabled');
$('.next,.last').addClass('disabled');
}
}else if(($('.first').is('.disabled')&&$('.prev').is('.disabled')&&$('.next').is('.disabled')&&$('.last').is('.disabled')) || $(this).is('disabled')){
console.log(111)
return false;
}else if($(this).is('.last')&&!$('.last').is('.disabled')){
console.log(222)
var aDom=document.querySelectorAll('.numpage');
$('.active').removeClass('active');
var lastDom=getDomByAttr(aDom,'islast','true');
$(lastDom).addClass('active');
$('.prev').attr('data-page',parseInt($(lastDom).attr('data-page'))-1);
$('.last,.next').addClass('disabled');
$('.first,.prev').removeClass('disabled');
}else if($(this).is('.first')&&!$('.first').is('.disabled')){
console.log(333)
var aDom=document.querySelectorAll('.numpage');
$('.active').removeClass('active');
var firstDom=getDomByAttr(aDom,'data-page','1');
$(firstDom).addClass('active');
$('.prev').attr('data-page',1);
$('.next').attr('data-page',2);
$('.last,.next').removeClass('disabled');
$('.first,.prev').addClass('disabled');
}
//显示页数同步
$('.page-input').val($('.active').attr('data-page'));
options.jump(options);
})
//跳转指定页数
$('#'+initDom).on('click','.page-btn',function(){ var aDom=document.querySelectorAll('.numpage');
var addDom=getDomByAttr(aDom,'data-page',$('.page-input').val());
var lastDom=getDomByAttr(aDom,'islast','true');
if($('.page-input').val()<=$(lastDom).html()&&$('.page-input').val()>0){ $('.active').removeClass('active');
$(addDom).addClass('active');
if($('.active').html()==1){
$('.first,.prev').addClass('disabled');
$('.last,.next').removeClass('disabled');
}else if($('.active').html()==$(lastDom).html()){
$('.first,.prev').removeClass('disabled');
$('.last,.next').addClass('disabled');
}else{
$('.first,.prev,.last,.next').removeClass('disabled');
}
$('.prev').attr('data-page',parseInt($('.active').html())-1);
$('.next').attr('data-page',parseInt($('.active').html())+1);
}
options.jump(options);
})
//每页限制条数
$('#'+initDom).on('change','select',function(){
initPage(initDom,count,isFL,isCount,isLimit,isSkip,$(this).val(),pageSizeList);
// console.warn('[警告] ');
options.jump(options);
})
}
initConfig('page',{
count:31,
isFL:true,
isCount:true,
isLimit:true,
isSkip:true,
pageSizeList:[5,10,15,20,25],
jump:function(obj){
console.log(obj)
}
}) </script>
</html>
一个老师的原生js分页:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
</head>
<style>
a{margin:0 5px;}
</style>
<body>
<div id="div1"></div>
</body>
<script>
page({
id:'div1',
nowNum:4,
allNum:10,
callback:function(now,all){
alert('当前页'+now+'总共页'+all)
}
})
function page(opt){
if(!opt.id){return false}
var obj=document.getElementById(opt.id);
var nowNum=opt.nowNum || 1;
var allNum=opt.allNum || 5;
var callback=opt.callback || function(){};
if( nowNum >= 4 && allNum >=6){
var oA=document.createElement('a');
oA.href='#'+1;
oA.innerHTML='首页';
obj.appendChild(oA);
}
if(nowNum >= 2){
var oA=document.createElement('a');
oA.href='#'+(nowNum -1);
oA.innerHTML='上一页';
obj.appendChild(oA);
}
if(allNum<=5){
for(var i=0;i<=allNum;i++){
var oA=document.createElement('a');
oA.href='#'+i;
if(nowNum == i ){
oA.innerHTML=i;
}else{
oA.innerHTML='['+i+']';
}
obj.appendChild(oA);
}
}else{
for(var i=1;i<=5;i++){
var oA=document.createElement('a');
if(nowNum == 1 || nowNum == 2){
oA.href='#'+i;
if(nowNum == i){
oA.innerHTML=i;
}else{ oA.innerHTML='['+i+']';
}
}else if((allNum - nowNum) == 0 || (allNum - nowNum) == 1){
oA.href='#'+ (allNum - 5 + i);
if((allNum - nowNum) == 0 && i==5){
oA.innerHTML=(allNum - 5 + i);
}else if((allNum - nowNum) == 1 && i==4){
oA.innerHTML=(allNum - 5 + i);
}else{ oA.innerHTML='['+(allNum - 5 + i)+']';
}
}else{
oA.href='#'+(nowNum - 3 + i);
if(i == 3){
oA.innerHTML=nowNum - 3 + i;
}else{ oA.innerHTML='['+(nowNum - 3 + i)+']';
}
}
obj.appendChild(oA);
}
}
if((allNum - nowNum) >=1 ){
var oA=document.createElement('a');
oA.href='#'+(nowNum + 1);
oA.innerHTML='下一页';
obj.appendChild(oA);
}
if((allNum - nowNum) >=3 && allNum >= 6){
var oA=document.createElement('a');
oA.href='#'+allNum;
oA.innerHTML='尾页';
obj.appendChild(oA);
}
callback(nowNum,allNum);
var aA=obj.getElementsByTagName('a');
for(var i=0;i<aA.length;i++){
aA[i].onclick=function(){
var nowNum = parseInt(this.getAttribute('href').substring(1));
obj.innerHTML='';
page({
id:opt.id,
nowNum:nowNum,
allNum:allNum,
callback:callback
})
return false;
}
}
}
</script>
</html>
加点样式的分页:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
</head>
<style>
a{
padding:5px 10px;
text-decoration: none;
border:1px solid #313c42;
margin-left: -1px;
color: #000; }
.active{
background: #18c752;
color: #fff;
}
</style>
<body>
<div id="div1"></div>
</body>
<script>
page({
id:'div1',
nowNum:4,
allNum:10,
callback:function(now,all){
console.log('当前页'+now+'总共页'+all)
}
})
function page(opt){
if(!opt.id){return false}
var obj=document.getElementById(opt.id);
var nowNum=opt.nowNum || 1;
var allNum=opt.allNum || 5;
var callback=opt.callback || function(){};
if( nowNum >= 4 && allNum >=6){
var oA=document.createElement('a');
oA.href='#'+1;
oA.innerHTML='首页';
obj.appendChild(oA);
}
if(nowNum >= 2){
var oA=document.createElement('a');
oA.href='#'+(nowNum -1);
oA.innerHTML='上一页';
obj.appendChild(oA);
}
if(allNum<=5){
for(var i=0;i<=allNum;i++){
var oA=document.createElement('a');
oA.href='#'+i;
if(nowNum == i ){
oA.innerHTML=i;
oA.className='active';
}else{
oA.innerHTML=i;
}
obj.appendChild(oA);
}
}else{
for(var i=1;i<=5;i++){
var oA=document.createElement('a');
if(nowNum == 1 || nowNum == 2){
oA.href='#'+i;
if(nowNum == i){
oA.innerHTML=i;
oA.className='active';
}else{ oA.innerHTML=i;
}
}else if((allNum - nowNum) == 0 || (allNum - nowNum) == 1){
oA.href='#'+ (allNum - 5 + i);
if((allNum - nowNum) == 0 && i==5){
oA.innerHTML=(allNum - 5 + i);
oA.className='active';
}else if((allNum - nowNum) == 1 && i==4){
oA.innerHTML=(allNum - 5 + i);
oA.className='active';
}else{ oA.innerHTML=(allNum - 5 + i);
}
}else{
oA.href='#'+(nowNum - 3 + i);
if(i == 3){
oA.innerHTML=nowNum - 3 + i;
oA.className='active';
}else{ oA.innerHTML=(nowNum - 3 + i);
}
}
obj.appendChild(oA);
}
}
if((allNum - nowNum) >=1 ){
var oA=document.createElement('a');
oA.href='#'+(nowNum + 1);
oA.innerHTML='下一页';
obj.appendChild(oA);
}
if((allNum - nowNum) >=3 && allNum >= 6){
var oA=document.createElement('a');
oA.href='#'+allNum;
oA.innerHTML='尾页';
obj.appendChild(oA);
}
callback(nowNum,allNum);
var aA=obj.getElementsByTagName('a');
for(var i=0,len=aA.length;i<len;i++){
aA[i].onclick=function(){
var nowNum = parseInt(this.getAttribute('href').substring(1));
obj.innerHTML='';
page({
id:opt.id,
nowNum:nowNum,
allNum:allNum,
callback:callback
})
return false;
}
}
}
</script>
</html>