jquery框架里面手写一个分页器

最新推荐文章于 2025-07-27 11:48:12 发布

中平签

最新推荐文章于 2025-07-27 11:48:12 发布

阅读量616

点赞数

CC 4.0 BY-SA版权

文章标签：寒鸦飞数点

本文链接：https://blog.youkuaiyun.com/weixin_43392545/article/details/92414688

本文分享了一个前后端不分离项目中自定义分页器的实现过程，详细介绍了如何根据数据初始化分页器，处理分页逻辑，以及响应用户交互。通过动态生成HTML元素和绑定事件，实现了流畅的分页体验。

二次开发了一共前后端不分离的项目，不可抗力原因，外部插件没法使用，只能自己写一个分页器了。
大致思路：
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>'
                 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；
    //有省略号时候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>'
            st+=' <span tex="5" class="pageactive">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);
        }else{
            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('span','click',function(){
        var index=Number($(this).text());
        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>'
            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')
        }
        page=index;
        console.log(page)
        $('.pagenation').attr('page',page)
        getlist(page)
    })
})

遇见问题；留作参考。