自定义分页组件

最新推荐文章于 2024-07-08 10:46:53 发布

格乌恩

最新推荐文章于 2024-07-08 10:46:53 发布

阅读量266

点赞数 3

分类专栏：前端视图与组件文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_42843447/article/details/130557413

版权

前端视图与组件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章介绍了一个简单的JavaScript分页功能的实现，该组件在超过7页时会显示省略号。代码包括了初始化分页、绑定点击事件以及相关CSS样式，适用于表格数据的分页展示。通过传入参数如总页数、每页条数和回调函数，可以灵活地在网页中应用此分页组件。

摘要由CSDN通过智能技术生成

使用列表的时候经常会使用到分页功能，基于项目需要，也尝试自主做了一个自定义的分页组件，希望能对大家有帮助。

效果如下：

很简单的一个分页功能，设置是超过7页将出现...省略，传入参数params，position：定位当前页位置，params包括总页数：total，每页展示数据条数：pageSize，容器：id，回调方法：callback

代码如下：

//表格翻页功能
var pageLinkModal = {
    initPageLink:function(options,position){
        var id = options.id;
        var allNum = options.total ? options.total:0;
        var pageSize = options.pageSize ? options.pageSize:0;
        var position = position?position:1;//当前显示页数下标
        var callback = options.callback; // 页面点击事件回调函数
        //清除原有分页
        if($("#" + id).find('.tab-pane-foot')[0]){
            $("#" + id).find('.tab-pane-foot')[0].remove();
        }
        if(allNum==0||pageSize==0){
            var str = ""
            $('#'+id+'').append(str);
            return
        }
        //向上取整获取总页数
        var allPages = Math.ceil(allNum/pageSize);
        var str = ' <div class="tab-pane-foot"><div class="tab-pane-foot">' +
            '<div class="pageLing pageLast">上一页</div>'

        if(allPages<=7){
            //普通情况
            for(var i = 1;i<=allPages;i++){
                if(i<10){
                    i = '0'+i;
                }
                if(i==position){
                    str+='<div class="pageLing pageActive">'+i+'</div>';
                }else{
                    str+='<div class="pageLing">'+i+'</div>';
                }
            }
            str += '<div class="pageLing pageNext">下一页</div></div>';
            $('#'+id+'').append(str);
        }else{
            //出现.....情况
            if(position==4||position==1||position==2||position==3){
                for(var i = 1;i<=5;i++){
                    if(i<10){
                        i = '0'+i;
                    }
                    if(i==position){
                        str+='<div class="pageLing pageActive">'+i+'</div>';
                    }else{
                        str+='<div class="pageLing">'+i+'</div>';
                    }
                }
                str+='<div class="pageMore">.....</div>';
                var allPageNum = allPages;
                if(allPageNum<10){
                    allPageNum = '0'+allPageNum;
                }
                str+='<div class="pageLing">'+allPageNum+'</div>';
                str += '<div class="pageLing pageNext">下一页</div></div>';
                $('#'+id+'').append(str);
            }else if(position==(allPages-1)||position==(allPages-2)||position==(allPages-3)||position==allPages){
                str+='<div class="pageLing">01</div>';
                str+='<div class="pageMore">.....</div>';
                for(var i = (allPages-4);i<=allPages;i++){
                    if(i<10){
                        i = '0'+i;
                    }
                    if(i==position){
                        str+='<div class="pageLing pageActive">'+i+'</div>';
                    }else{
                        str+='<div class="pageLing">'+i+'</div>';
                    }
                }
                str += '<div class="pageLing pageNext">下一页</div></div>';
                $('#'+id+'').append(str);
            }else{
                //存在选定页数(第四页后转变形式)
                var lastPosition = position-1;
                var nextPosition = position+1;
                var positionNum = position;
                if(positionNum<10){
                    positionNum = '0'+positionNum;
                }
                if(lastPosition<10){
                    lastPosition = '0'+lastPosition;
                }
                if(nextPosition<10){
                    nextPosition = '0'+nextPosition;
                }
                str+='<div class="pageLing">01</div>';
                str+='<div class="pageMore">.....</div>';
                str+='<div class="pageLing">'+lastPosition+'</div>';
                str+='<div class="pageLing pageActive">'+positionNum+'</div>';
                str+='<div class="pageLing">'+nextPosition+'</div>';
                str+='<div class="pageMore">.....</div>';
                var allPageNum = allPages;
                if(allPageNum<10){
                    allPageNum = '0'+allPageNum;
                }
                str+='<div class="pageLing">'+allPageNum+'</div>';
                str += '<div class="pageLing pageNext">下一页</div></div>';
                $('#'+id+'').append(str);
            }
        }
        pageLinkModal.addPageLinkEvent(callback, options); // 绑定页码点击事件
    },

    // 绑定分页点击事件
    addPageLinkEvent:function(callback, options){
        var id = options.id;
        var tabId = pageLinkModal.isEmpty(options.tabId) ? '' : options.tabId;
        var doms = $("#" + id).find('.pageLing');
        for(var i = 0;i<doms.length;i++){
            doms[i].onclick = function(){
                var lastPaegNum = 1;    //上一个选择的页数
                var maxPageNum = parseInt($(doms[doms.length-2]).text());
                for(var j = 0;j<doms.length;j++){
                    if($(doms[j]).hasClass('pageActive')){
                        lastPaegNum = parseInt($(doms[j]).text())
                        break;
                    }
                }
                var pageNum = parseInt($(this).text())
                if($(this).hasClass('pageLast')){
                    if(lastPaegNum==1){
                        return;
                    }else{
                        for(var j = 0;j<doms.length;j++){
                            $(doms[j]).removeClass('pageActive');
                        }
                        pageNum = lastPaegNum-1
                    }
                }else if($(this).hasClass('pageNext')){
                    if(lastPaegNum==maxPageNum){
                        return;
                    }else{
                        for(var j = 0;j<doms.length;j++){
                            $(doms[j]).removeClass('pageActive');
                        }
                        pageNum = lastPaegNum+1
                    }
                }else{
                    $(this).addClass('pageActive');
                }
                pageLinkModal.initPageLink(options,pageNum);
                callback(pageNum, tabId);//可在callback中重置分页器
            }
        }
    },
    // 是否为空
    isEmpty:function(value) {
        if (value == null || pageLinkModal.trim(value) == "") {
            return true;
        }
        return false;
    },

    // 去除空格
    trim:function(value) {
        if (value == null) {
            return "";
        }
        return value.toString().replace(/(^\s*)|(\s*$)|\r|\n/g, "");
    }
}
/*表格翻页功能end*/

css样式如下：

/*分页组件*/
.tab-pane-foot{
    height: 40px;
    overflow: hidden;
    float: right;
}
.pageLing{
    float: left;
    padding: 5px;
    border:1px solid #999;;
    margin-right: 10px;
    cursor: pointer;
}
.pageMore{
    float: left;
    padding: 5px;
    border:1px solid #999;;
    margin-right: 10px;
}
.pageActive{
    background-color: #f45151;
    color: #fff;
}
/*分页组件end*/

使用：

var options = { total: 188, pageSize: 6, id: "topUserMsg", callback: function(){console.log(1)} };
    
    $(function(){ 
        pageLinkModal.initPageLink(options, 7);
    })

这样一个简单的分页器就完成啦。