ajax jq分页

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>pagination-nick</title>
    <style>
        button{
            padding:5px;
            margin:5px;
        }
        .active-nick{
            color:red;
        }
        input{
            width:50px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="pagination-nick"></div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
//        定义一个分页方法，可多次调用
        function paginationNick(opt){
//            参数设置
            var pager={
                paginationBox:'',//分页容器-- 必填
                mainBox:'',//内容盒子--必填
                numBtnBox:'',//数字按钮盒子-- 必填
                btnBox:'',//按钮盒子 --必填
                ipt:'',//input class-- 必填
                goBtn:'',//go btn class --必填
                currentBtn:'',//当前按钮class name --必填
                pageCount:5,//每页显示几条数据
                numBtnCount:3,//当前页左右两边各多少个数字按钮
                currentPage:0,//当前页码data-page，首屏默认值
                maxCount:0,//ajax请求数据分成的最大页码
                data:[]//ajax请求的数据
            };
            pager = $.extend(pager,opt);
            //请求数据页面跳转方法
            function goPage(btn){
                //obj为ajax请求数据
                var obj={other:{},value:[11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0]};
                //将展示的数据赋值给pager.data  (array)
                pager.data=obj.value;
                //设置ajax请求数据分成的最大页码
                pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 :
                    pager.data.length / pager.pageCount;

//                设置当前页码
                if(!isNaN(btn)){//数字按钮
                    pager.currentPage=parseInt(btn);
                }else{
                    switch(btn){
                        case 'first':
                            pager.currentPage=0;
                            break;
                        case 'prev':
                            if(pager.currentPage>0){
                                --pager.currentPage;
                            }
                            break;
                        case 'next':
                            if(pager.currentPage+1<pager.maxCount){
                                ++pager.currentPage;
                            }
                            break;
                        case 'last':
                            pager.currentPage=pager.maxCount-1;
                            break;
                    }
                }
                //创建数字按钮
                createNumBtn(pager.currentPage);
                //赋值给页码跳转输入框的value，表示当前页码
                $('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1);
//              内容区填充数据
                var arr=[],str='';
                arr=pager.data.slice(pager.pageCount*pager.currentPage,
                        pager.data.length - pager.pageCount*(pager.currentPage+1) > -1 ?
                        pager.pageCount*(pager.currentPage+1) : pager.data.length);
                arr.forEach(function(v){
                    str+='<div>'+v+'</div>';
                });
                $('.'+pager.mainBox).html(str);
            }
            //创建非数字按钮和数据内容区
            function createOtherBtn(){
                $('.'+pager.paginationBox).html('<div class="'+pager.btnBox+'"><button data-page="first" class="first-btn">首页</button><button data-page="prev" class="prev-btn">上一页</button><span class="'+pager.numBtnBox+'"></span><button data-page="next" class="next-btn">下一页</button><input type="text" placeholder="请输入页码" class="'+pager.ipt+'"><button class="'+pager.goBtn+'">确定go</button><button data-page="last" class="last-btn">尾页</button></div><div class="'+pager.mainBox+'"></div>');
                //ipt value变化并赋值给go btn data-page
                $('.'+pager.btnBox+' .'+pager.ipt).change(function(){
                    if(!isNaN($(this).val())){//是数字
                        if($(this).val() > pager.maxCount){//限制value最大值，跳转尾页
                            $(this).val(pager.maxCount);
                        }
                        if($(this).val()<1){//限制value最小值，跳转首页
                            $(this).val(1);
                        }
                    }else{//非数字清空value
                        $(this).val('');
                    }
                    $('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : '');
                });
                //每个btn绑定请求数据页面跳转方法
                $('.'+pager.btnBox+' button').each(function(i,v){
                    $(this).click(function(){
                        //有值且不是上一次的页码时才调用
                        if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){
                            goPage(v.getAttribute('data-page'));
                        }
                    });
                });
            }
            //创建数字按钮
            function createNumBtn(page){
                //page是页面index从0开始，这里的page加减一要注意
                var str='';
                if(pager.maxCount>pager.numBtnCount*2){//若最大页码数大于等于固定数字按钮总数（pager.numBtnCount*2+1）时
                    //此页左边右边各pager.numBtnCount个数字按钮
                    if(page-pager.numBtnCount>-1){//此页左边有pager.numBtnCount页 page页码从0开始
                        for(var m=pager.numBtnCount;m>0;m--){
                            str+='<button data-page="'+(page-m)+'">'+(page-m+1)+'</button>';
                        }
                    }else{
                        for(var k=0;k<page;k++){
                            str+='<button data-page="'+k+'">'+(k+1)+'</button>';
                        }
                    }
                    str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
                    if(pager.maxCount-page>3){//此页右边有pager.numBtnCount页 page页码从0开始
                        for(var j=1;j<pager.numBtnCount+1;j++){
                            str+='<button data-page="'+(page+j)+'">'+(page+j+1)+'</button>';
                        }
                    }else{
                        for(var i=page+1;i<pager.maxCount;i++){
                            str+='<button data-page="'+i+'">'+(i+1)+'</button>';
                        }
                    }
                    /*数字按钮总数小于固定的数字按钮总数pager.numBtnCount*2+1时，
                     这个分支，可以省略*/
                    if(str.match(/<\/button>/ig).length<pager.numBtnCount*2+1){
                        str='';
                        if(page<pager.numBtnCount){//此页左边页码少于固定按钮数时
                            for(var n=0;n<page;n++){//此页左边
                                str+='<button data-page="'+n+'">'+(n+1)+'</button>';
                            }
                            str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
                            for(var x=1;x<pager.numBtnCount*2+1-page;x++){//此页右边
                                str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
                            }
                        }
                        if(pager.maxCount-page-1<pager.numBtnCount){
                            for(var y=pager.numBtnCount*2-(pager.maxCount-page-1);y>0;y--){//此页左边
                                str+='<button data-page="'+(page-y)+'">'+(page-y+1)+'</button>';
                            }
                            str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
                            for(var z=page+1;z<pager.maxCount;z++){//此页右边
                                str+='<button data-page="'+z+'">'+(z+1)+'</button>';
                            }
                        }
                    }
                }else{
                    str='';
                    for(var n=0;n<page;n++){//此页左边
                        str+='<button data-page="'+n+'">'+(n+1)+'</button>';
                    }
                    str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
                    for(var x=1;x<pager.maxCount-page;x++){//此页右边
                        str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
                    }
                }

                $('.'+pager.numBtnBox).html(str);

                //每个btn绑定请求数据页面跳转方法
                $('.'+pager.numBtnBox+' button').each(function(i,v){
                    $(this).click(function(){
                        goPage(v.getAttribute('data-page'));
                    });
                });

                //按钮禁用
                $('.'+pager.btnBox+' button').not('.'+pager.currentBtn).attr('disabled',false);
                if(!page){//首页时
                    $('.'+pager.btnBox+' .first-btn').attr('disabled',true);
                    $('.'+pager.btnBox+' .prev-btn').attr('disabled','disabled');
                }
                if(page==pager.maxCount-1){//尾页时
                    $('.'+pager.btnBox+' .last-btn').attr('disabled',true);
                    $('.'+pager.btnBox+' .next-btn').attr('disabled',true);
                }
            }

            //首屏加载
            createOtherBtn();//首屏加载一次非数字按钮即可
            goPage();//请求数据页面跳转满足条件按钮点击都执行，首屏默认跳转到currentPage
        }
        //调用
        paginationNick({
            paginationBox:'pagination-nick',//分页容器--必填
            mainBox:'main-box-nick',//内容盒子--必填
            numBtnBox:'num-box-nick',//数字按钮盒子-- 必填
            btnBox:'btn-box-nick',//按钮盒子 --必填
            ipt:'page-ipt-nick',//input class-- 必填
            goBtn:'go-btn-nick',//go btn class --必填
            currentBtn:'active-nick'//当前按钮class name --必填
        });
    </script>
</body>
</html>
复制代码

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>pagination-nick</title>
    <style>
        button{
            padding:5px;
            margin:5px;
        }
        .active-nick{
            color:red;
        }
        input{
            width:50px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="pagination-nick"></div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
//        定义一个分页方法，可多次调用
        function paginationNick(opt){
//            参数设置
            var pager={
                paginationBox:'',//分页容器-- 必填
                mainBox:'',//内容盒子--必填
                numBtnBox:'',//数字按钮盒子-- 必填
                btnBox:'',//按钮盒子 --必填
                ipt:'',//input class-- 必填
                goBtn:'',//go btn class --必填
                currentBtn:'',//当前按钮class name --必填
                pageCount:5,//每页显示几条数据
                numBtnCount:3,//当前页左右两边各多少个数字按钮
                currentPage:0,//当前页码data-page，首屏默认值
                maxCount:0,//ajax请求数据分成的最大页码
                data:[]//ajax请求的数据
            };
            pager = $.extend(pager,opt);
            //请求数据页面跳转方法
            function goPage(btn){
                //obj为ajax请求数据
                var obj={other:{},value:[11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0]};
                //将展示的数据赋值给pager.data  (array)
                pager.data=obj.value;
                //设置ajax请求数据分成的最大页码
                pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 :
                    pager.data.length / pager.pageCount;

//                设置当前页码
                if(!isNaN(btn)){//数字按钮
                    pager.currentPage=parseInt(btn);
                }else{
                    switch(btn){
                        case 'first':
                            pager.currentPage=0;
                            break;
                        case 'prev':
                            if(pager.currentPage>0){
                                --pager.currentPage;
                            }
                            break;
                        case 'next':
                            if(pager.currentPage+1<pager.maxCount){
                                ++pager.currentPage;
                            }
                            break;
                        case 'last':
                            pager.currentPage=pager.maxCount-1;
                            break;
                    }
                }
                //创建数字按钮
                createNumBtn(pager.currentPage);
                //赋值给页码跳转输入框的value，表示当前页码
                $('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1);
//              内容区填充数据
                var arr=[],str='';
                arr=pager.data.slice(pager.pageCount*pager.currentPage,
                        pager.data.length - pager.pageCount*(pager.currentPage+1) > -1 ?
                        pager.pageCount*(pager.currentPage+1) : pager.data.length);
                arr.forEach(function(v){
                    str+='<div>'+v+'</div>';
                });
                $('.'+pager.mainBox).html(str);
            }
            //创建非数字按钮和数据内容区
            function createOtherBtn(){
                $('.'+pager.paginationBox).html('<div class="'+pager.btnBox+'"><button data-page="first" class="first-btn">首页</button><button data-page="prev" class="prev-btn">上一页</button><span class="'+pager.numBtnBox+'"></span><button data-page="next" class="next-btn">下一页</button><input type="text" placeholder="请输入页码" class="'+pager.ipt+'"><button class="'+pager.goBtn+'">确定go</button><button data-page="last" class="last-btn">尾页</button></div><div class="'+pager.mainBox+'"></div>');
                //ipt value变化并赋值给go btn data-page
                $('.'+pager.btnBox+' .'+pager.ipt).change(function(){
                    if(!isNaN($(this).val())){//是数字
                        if($(this).val() > pager.maxCount){//限制value最大值，跳转尾页
                            $(this).val(pager.maxCount);
                        }
                        if($(this).val()<1){//限制value最小值，跳转首页
                            $(this).val(1);
                        }
                    }else{//非数字清空value
                        $(this).val('');
                    }
                    $('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : '');
                });
                //每个btn绑定请求数据页面跳转方法
                $('.'+pager.btnBox+' button').each(function(i,v){
                    $(this).click(function(){
                        //有值且不是上一次的页码时才调用
                        if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){
                            goPage(v.getAttribute('data-page'));
                        }
                    });
                });
            }
            //创建数字按钮
            function createNumBtn(page){
                //page是页面index从0开始，这里的page加减一要注意
                var str='';
                if(pager.maxCount>pager.numBtnCount*2){//若最大页码数大于等于固定数字按钮总数（pager.numBtnCount*2+1）时
                    //此页左边右边各pager.numBtnCount个数字按钮
                    if(page-pager.numBtnCount>-1){//此页左边有pager.numBtnCount页 page页码从0开始
                        for(var m=pager.numBtnCount;m>0;m--){
                            str+='<button data-page="'+(page-m)+'">'+(page-m+1)+'</button>';
                        }
                    }else{
                        for(var k=0;k<page;k++){
                            str+='<button data-page="'+k+'">'+(k+1)+'</button>';
                        }
                    }
                    str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
                    if(pager.maxCount-page>3){//此页右边有pager.numBtnCount页 page页码从0开始
                        for(var j=1;j<pager.numBtnCount+1;j++){
                            str+='<button data-page="'+(page+j)+'">'+(page+j+1)+'</button>';
                        }
                    }else{
                        for(var i=page+1;i<pager.maxCount;i++){
                            str+='<button data-page="'+i+'">'+(i+1)+'</button>';
                        }
                    }
                    /*数字按钮总数小于固定的数字按钮总数pager.numBtnCount*2+1时，
                     这个分支，可以省略*/
                    if(str.match(/<\/button>/ig).length<pager.numBtnCount*2+1){
                        str='';
                        if(page<pager.numBtnCount){//此页左边页码少于固定按钮数时
                            for(var n=0;n<page;n++){//此页左边
                                str+='<button data-page="'+n+'">'+(n+1)+'</button>';
                            }
                            str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
                            for(var x=1;x<pager.numBtnCount*2+1-page;x++){//此页右边
                                str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
                            }
                        }
                        if(pager.maxCount-page-1<pager.numBtnCount){
                            for(var y=pager.numBtnCount*2-(pager.maxCount-page-1);y>0;y--){//此页左边
                                str+='<button data-page="'+(page-y)+'">'+(page-y+1)+'</button>';
                            }
                            str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
                            for(var z=page+1;z<pager.maxCount;z++){//此页右边
                                str+='<button data-page="'+z+'">'+(z+1)+'</button>';
                            }
                        }
                    }
                }else{
                    str='';
                    for(var n=0;n<page;n++){//此页左边
                        str+='<button data-page="'+n+'">'+(n+1)+'</button>';
                    }
                    str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
                    for(var x=1;x<pager.maxCount-page;x++){//此页右边
                        str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
                    }
                }

                $('.'+pager.numBtnBox).html(str);

                //每个btn绑定请求数据页面跳转方法
                $('.'+pager.numBtnBox+' button').each(function(i,v){
                    $(this).click(function(){
                        goPage(v.getAttribute('data-page'));
                    });
                });

                //按钮禁用
                $('.'+pager.btnBox+' button').not('.'+pager.currentBtn).attr('disabled',false);
                if(!page){//首页时
                    $('.'+pager.btnBox+' .first-btn').attr('disabled',true);
                    $('.'+pager.btnBox+' .prev-btn').attr('disabled','disabled');
                }
                if(page==pager.maxCount-1){//尾页时
                    $('.'+pager.btnBox+' .last-btn').attr('disabled',true);
                    $('.'+pager.btnBox+' .next-btn').attr('disabled',true);
                }
            }

            //首屏加载
            createOtherBtn();//首屏加载一次非数字按钮即可
            goPage();//请求数据页面跳转满足条件按钮点击都执行，首屏默认跳转到currentPage
        }
        //调用
        paginationNick({
            paginationBox:'pagination-nick',//分页容器--必填
            mainBox:'main-box-nick',//内容盒子--必填
            numBtnBox:'num-box-nick',//数字按钮盒子-- 必填
            btnBox:'btn-box-nick',//按钮盒子 --必填
            ipt:'page-ipt-nick',//input class-- 必填
            goBtn:'go-btn-nick',//go btn class --必填
            currentBtn:'active-nick'//当前按钮class name --必填
        });
    </script>
</body>
</html>
posted @   一杯咖啡钱  阅读(51)  评论(0)  编辑  收藏  举报
相关博文：
·  前端获取本地数据渲染在页面上
·  flask以及jijia2的基本使用
·  后台分页-jqPaginator使用
·  JS数组分页，页数，每页条数，数组
·  jquery分页插件am-pagination.js
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae