jquery框架⾥⾯⼿写⼀个分页器
⼆次开发了⼀共前后端不分离的项⽬，不可抗⼒原因，外部插件没法使⽤，只能⾃⼰写⼀个分页器了。⼤致思路：
1 页⾯数据获取到以后根据拿到的数据进⾏列表和分页器的初始化展⽰；
2 操作分页器各个项的处理；
HTML放⼀个div 配上⼀个标识 我这⾥⽤的class类名pagenation
//num：总页数--初始为1；page：当前页数--初始为1
<div class="pagenation" num="1" page="1" >
页⾯加载完成时候初始化渲染列表和分页器
//初始页数 var page=1;--当前page页
var index=1; var counts=1; //定义初始的值
$(document).ready(function(){
$.ajax({
url:‘xxxxxxxxxx‘, type:'GET',
success:function(res){
//拿到数据拼接展⽰数据列表
getlist(1);
//分页器初始化单独写了个setpage⽅法，传的counts参数是数据的总条数；
//因为在后⾯点击事件⾥⾯对分页器重新做了处理，所以这个⽅法其实只在这⾥调⽤了⼀次；
setpage(counts)
},
});
分页器初始化⽅法：没有⽤模板字符串；
function setpage(counts){
//总条数
var total=counts;
//总页数
var m=1;
//计算⼀共⼏页
if(total%15===0){---15是每页显⽰的列表条数
m=total/15;
//能被每页条数整除了，则值就是这m；在pagenation上设置⾃定义属性⽅便查看
$('.pagenation').attr('num',m)
}else{
m=Math.floor(total/15)+1;
//不能被整除了，则值就是这个m；在pagenation上设置⾃定义属性⽅便查看
$('.pagenation').attr('num',m);
}
var num=Number($('.pagenation').attr('num'));
var st='<em class="prev" ><</em>'
console.log(num)
if(num<=1){---页数⼩于等于1页
st+=' <span tex="1">1</span>'
st+=' <em class="next">></em>'
}else if(num<=9){--页数⼤于1页，⼩于你想要在左右箭头中间显⽰的页码个数，我这⾥是9； for (var i = 1; i <=num ; i++) {
st+=' <span tex='+i+'>'+i+'</span>'
}
st+=' <em class="next">></em>'
}else{---⼤于左右箭头中间页码个数了，右侧显⽰省略号
for (var i = 1; i <=7 ; i++) {
st+=' <span tex='+i+'>'+i+'</span>'
}
st+='<i class="more" tex="more">...</i>'
st+='<span tex='+num+'>'+num+'</span>'
st+=' <em class="next">></em>'
}
$('.pagenation').html('')
$('.pagenation').append(st)
$('.pagenation span').eq(0).addClass('pageactive')
//拼接完给第⼀个也就是1页码添加激活样式的class；
}
代码有点臃肿，O(∩_∩)O
左右箭头主要是根据⾃⼰显⽰的页码数来处理的，
//点击左右箭头
$('.pagenation').delegate('.prev','click',function(){
if(page<=1){---当前page是第⼀页了
page=1
toast.tan('已经是第⼀页了')
}else{--不是的话点击⼀次减1；
page--;
index=page;
if(num<=9){
//9是左右箭头中间显⽰的页码数；总页数⼩于等于9，说明分页器没有省略号，直接改样式 $('.pagenation span').removeClass('pageactive')
$('.pagenation span[tex='+index+']').addClass('pageactive')
}else if(index<=5){
//《1 2 3 4 5 6 7 ... s》
//分页器含省略号了，且点击后的page已经⼩于5了，显⽰右侧省略号；
$('.pagenation').html('')
var st=''
var st='<em class="prev" ><</em><span tex="1">1</span>'
st+=' <span tex="2">2</span>'
st+=' <span tex="3">3</span>'
st+=' <span tex="4">4</span>'
st+=' <span tex="5">5</span>'
st+=' <span tex="6">6</span>'
st+=' <span tex="7">7</span>'
st+='<i class="more" tex="more">...</i>'
st+='<span tex='+num+'>'+num+'</span>'
st+=' <em class="next">></em>'
$('.pagenation').append(st);
//给点击后的page页码添加样式
$('.pagenation span[tex='+index+']').addClass('pageactive')
}else if(index>5&&index<num-4){
// page在总页数的中间；显⽰左右两个省略号，
// //《1 ... a b page c d ... s》
var a=index-2;
var b=index-1;
var c=Number(index)+1;
var d=Number(index)+2;
$('.pagenation').html('')
var st=''
var st='<em class="prev" ><</em><span tex='+1+'>1</span>' st+='<i class="less" tex="less">...</i>'
st+=' <span tex='+a+'>'+a+'</span>'
st+=' <span tex='+b+'>'+b+'</span>'
st+=' <span class="pageactive" tex='+index+'>'+index+'</span>' st+=' <span tex='+c+'>'+c+'</span>'
st+=' <span tex='+d+'>'+d+'</span>'
st+='<i class="more" tex="more">...</i>'
st+='<span tex='+num+'>'+num+'</span>'
st+=' <em class="next">></em>'
$('.pagenation').append(st);
}else if(index>=num-4){
// page接近最⼤值了，只显⽰左侧省略号
//《1 ... a b c d e f H》
var a=num-6;
var b=num-5;
var c=num-4;
var d=num-3;
var e=num-2;
var f=num-1;
$('.pagenation').html('')
var st='<em class="prev" ><</em><span tex='+1+'>1</span>' st+='<i class="less" tex="less">...</i>'
st+='<span tex='+a+'>'+a+'</span>'
st+='<span tex='+b+'>'+b+'</span>'
st+='<span tex='+c+'>'+c+'</span>'
st+='<span tex='+d+'>'+d+'</span>'
st+='<span tex='+e+'>'+e+'</span>'
st+='<span tex='+f+'>'+f+'</span>'
st+='<span tex='+num+'>'+num+'</span>'
st+='<em class="next">></em>'
$('.pagenation').append(st);
$('.pagenation span[tex='+index+']').addClass('pageactive')
}
getlist(page)
};
console.log(page)
$('.pagenation').attr('page',page)
})
//右键头同上；
$('.pagenation').delegate('.next','click',function(){
if(page<num){
page++;
index=page;
if(num<=9){
$('.pagenation span').removeClass('pageactive')
$('.pagenation span[tex='+index+']').addClass('pageactive')
}else if(index<=5){
$('.pagenation').html('')
var st=''
var st='<em class="prev" ><</em><span tex="1">1</span>'
jquery框架原理st+=' <span tex="2">2</span>'
st+=' <span tex="3">3</span>'
st+=' <span tex="4">4</span>'
st+=' <span tex="5">5</span>'
st+=' <span tex="6">6</span>'
st+=' <span tex="7">7</span>'
st+='<i class="more" tex="more">...</i>'
st+='<span tex='+num+'>'+num+'</span>'
st+=' <em class="next">></em>'
$('.pagenation').append(st);
$('.pagenation span[tex='+index+']').addClass('pageactive')
}else if(index>5&&index<num-4){
var a=index-2;
var b=index-1;
var c=Number(index)+1;
var d=Number(index)+2;
$('.pagenation').html('')
var st=''
var st='<em class="prev" ><</em><span tex='+1+'>1</span>' st+='<i class="less" tex="less">...</i>'
st+=' <span tex='+a+'>'+a+'</span>'
st+=' <span tex='+b+'>'+b+'</span>'
st+=' <span class="pageactive" tex='+index+'>'+index+'</span>' st+=' <span tex='+c+'>'+c+'</span>'
st+=' <span tex='+d+'>'+d+'</span>'
st+='<i class="more" tex="more">...</i>'
st+='<span tex='+num+'>'+num+'</span>'
st+=' <em class="next">></em>'
$('.pagenation').append(st);
}else if(index>=num-4){
var a=num-6;
var b=num-5;
var c=num-4;
var d=num-3;
var e=num-2;
var f=num-1;
$('.pagenation').html('')
var st=''
var st='<em class="prev" ><</em><span tex='+1+'>1</span>' st+='<i class="less" tex="less">...</i>'
st+='<span tex='+a+'>'+a+'</span>'
st+='<span tex='+b+'>'+b+'</span>'
st+='<span tex='+c+'>'+c+'</span>'
st+='<span tex='+d+'>'+d+'</span>'
st+='<span tex='+e+'>'+e+'</span>'
st+='<span tex='+f+'>'+f+'</span>'
st+='<span tex='+num+'>'+num+'</span>'
st+='<em class="next">></em>'
$('.pagenation').append(st);
$('.pagenation span[tex='+index+']').addClass('pageactive')
}
getlist(page)
}else{
page=num;
toast.tan('已经是最后⼀页了')
}
console.log(page,index)
$('.pagenation').attr('page',page)
})
//右侧省略跳进；⼀次加5；
//右侧省略跳进；⼀次加5；
//有省略号时候page我这⾥是在页码中间的，刚好左边4个，右边四个；有省略号总页数⼀定是⼤于页码数的我这⾥是9； $('.pagenation').delegate('.more','click',function(){
$('.pagenation span').removeClass('pageactive')
if(page+9>=num){
//显⽰左省略号；
//当前page点击了省略号以后page就变成了page+5；
//如果⼀共100页；右侧四个位置，中间最⼩是96（100-4）【95就要显⽰右侧省略号⾛下⾯了】；
//如果page+5>=100-4即page+9>num；既跳5以后右侧不显⽰省略号
var a=num-6;
var b=num-5;
var c=num-4;
var d=num-3;
var e=num-2;
var f=num-1;
page=num-4;
$('.pagenation').html('')
var st=''
var st='<em class="prev" ><</em><span tex='+1+'>1</span>'
st+='<i class="less" tex="less">...</i>'
st+=' <span tex='+a+'>'+a+'</span>'
st+=' <span tex='+b+'>'+b+'</span>'
st+=' <span class="pageactive" tex='+page+'>'+page+'</span>'
st+=' <span tex='+d+'>'+d+'</span>'
st+=' <span tex='+e+'>'+e+'</span>'
st+=' <span tex='+f+'>'+f+'</span>'
st+='<span tex='+num+'>'+num+'</span>'
st+=' <em class="next">></em>'
$('.pagenation').append(st);
}else{
//否则显⽰左右省略号
page= Number(page)+5;
var a=page-2;
var b=page-1;
var c=Number(page)+1;
var d=Number(page)+2;
var e=Number(page)+3;
$('.pagenation').html('')
var st=''
var st='<em class="prev" ><</em><span tex='+1+'>1</span>'
st+='<i class="less" tex="less">...</i>'
st+=' <span tex='+a+'>'+a+'</span>'
st+=' <span tex='+b+'>'+b+'</span>'
st+=' <span class="pageactive" tex='+page+'>'+page+'</span>'
st+=' <span tex='+c+'>'+c+'</span>'
st+=' <span tex='+d+'>'+d+'</span>'
st+='<i class="more" tex="more">...</i>'
st+='<span tex='+num+'>'+num+'</span>'
st+=' <em class="next">></em>'
$('.pagenation').append(st);
}
console.log(page)
$('.pagenation').attr('page',page)
getlist(page)
})
//左侧省略跳退 --同上
$('.pagenation').delegate('.less','click',function(){
$('.pagenation span').removeClass('pageactive')
if(page-8<=1){
page=5;
$('.pagenation').html('')
var st=''
var st='<em class="prev" ><</em><span tex="1">1</span>'
st+=' <span tex="2">2</span>'
st+=' <span tex="3">3</span>'
st+=' <span tex="4">4</span>'
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论