lowB分页

分页代码

/**
 * 自定义分页插件
 * @param opt
 */

$.fn.microMallPager = function(opt) {
    var _this = this;
    var opt = $.extend({
        //当前页码
        currPage: 1,
        //总页数
        totalPage: 10,
        //当前页码的class
        currNumClass: "active",
        //如果分页在此数之内，不显示省略号
        showNum: 20,
        //是否显示分页信息
        showPageInfo: true,
        //每页显示几条的候选项，如果为空则不显示此内容
        recodeNumList: [],
        //当前每页显示几条
        recodeNumSel: 10,
        //是否显示跳转按钮
        gotoStep: true,
        //未分页是否还要显示
        noPageShow: true,
        //是否要居中显示
        showCenter:false,
        //总共的条数
        totalNum: 200
    }, opt||{});

    //如果设置未分页不显示，当没有分页时则不生成分页
    if(!opt.noPageShow && opt.totalPage <= 1){
        _this.empty();
        return;
    }

    var pageCont = $('
');

    var recodeNumSel = $('
');

    if(opt.recodeNumList.length > 0){
        var recodeNumSelTitle = $('
每页显示: 
'),
            recodeNumSelCont = $('
'),
            recodeNumSelCls = $('
'),
            recodeNumSelected = $('
' + opt.recodeNumSel + '
'),
            recodeNumSelList = $('
');

        for (var i = opt.recodeNumList.length-1; i >= 0; i--) {
            var numItem = opt.recodeNumList[i];
            var optionItem = $('
' + numItem + '
');
            recodeNumSelList.append(optionItem);
        }

        recodeNumSelCont.append(recodeNumSelected);
        recodeNumSelCont.append(recodeNumSelList);

        recodeNumSel.append(recodeNumSelTitle);
        recodeNumSel.append(recodeNumSelCont);
        recodeNumSel.append(recodeNumSelCls);
    }
    pageCont.append(recodeNumSel);

    var numList = $('
'),
        numListUl = $('
');
    //当前第一页，上一页不可用
    if(opt.currPage > 1){
        var prevPageItem = $('
'),
            prevPageNum = $('上一页');
        prevPageItem.append(prevPageNum);
        numListUl.append(prevPageItem);
    }else{
        var prevPageItem = $('
'),
            prevPageNum = $('上一页');
        prevPageItem.append(prevPageNum);
        numListUl.append(prevPageItem);
    }
    if(opt.totalPage <= opt.showNum){
        //如果数量不多，则不用显示省略号
        for(var pNum=1; pNum<=opt.totalPage; pNum++){
            var currPageItem = $('
'),
                currPageNum = $('' + pNum + '');
            if(pNum == opt.currPage){
                currPageNum.addClass(opt.currNumClass);
            }
            currPageItem.append(currPageNum);
            numListUl.append(currPageItem);
        }
    }else{

        var sideNum = parseInt(opt.showNum/2);
        if(opt.currPage - sideNum <= 2){
            for(var pNum=1; pNum<= opt.currPage-1; pNum++){
                var currPageItem = $('
'),
                    currPageNum = $('' + pNum + '');
                currPageItem.append(currPageNum);
                numListUl.append(currPageItem);
            }
        }else{
            var firstPageItem = $('
'),
                firstPageNum = $('1');
            firstPageItem.append(firstPageNum);
            numListUl.append(firstPageItem);
            numListUl.append($('
...
'));

            for(var pNum=opt.currPage-sideNum; pNum<= opt.currPage-1; pNum++){
                var currPageItem = $('
'),
                    currPageNum = $('' + pNum + '');
                currPageItem.append(currPageNum);
                numListUl.append(currPageItem);
            }
        }

        //添加当前页面
        var nowPageItem = $('
'),
            nowPageNum = $('' + opt.currPage + '');
        nowPageItem.append(nowPageNum);
        numListUl.append(nowPageItem);

        if(opt.currPage + sideNum >= opt.totalPage - 1){
            for(var pNum=opt.currPage+1; pNum<= opt.totalPage; pNum++){
                var currPageItem = $('
'),
                    currPageNum = $('' + pNum + '');
                currPageItem.append(currPageNum);
                numListUl.append(currPageItem);
            }
        }else{
            for(var pNum=opt.currPage+1; pNum<= opt.currPage+sideNum; pNum++){
                var currPageItem = $('
'),
                    currPageNum = $('' + pNum + '');
                currPageItem.append(currPageNum);
                numListUl.append(currPageItem);
            }
            numListUl.append($('
...
'));
            var lastPageItem = $('
'),
                lastPageNum = $('' + opt.totalPage + '');
            lastPageItem.append(lastPageNum);
            numListUl.append(lastPageItem);
        }
    }

    //当前最后一页，下一页不可用
    if(opt.currPage < opt.totalPage){
        var nextPageItem = $('
'),
            nextPageNum = $('下一页');
        nextPageItem.append(nextPageNum);
        numListUl.append(nextPageItem);
    }else{
        var nextPageItem = $('
'),
            nextPageNum = $('下一页');
        nextPageItem.append(nextPageNum);
        numListUl.append(nextPageItem);
    }

    numList.append(numListUl);
    pageCont.append(numList);

    if (opt.showPageInfo){
        var pageInfo = $('
共' + opt.totalPage + '页  总计'+ opt.totalNum +'条
');
        pageCont.append(pageInfo);
    }

    if (opt.gotoStep) {
        var goStep = $('
'),
            goStep_input = $(''),
            goStep_btn = $('');

        goStep.append(goStep_input);
        goStep.append(goStep_btn);
        pageCont.append(goStep);
    }
    var clear_pageCont = $('
');
    pageCont.append(clear_pageCont);

    _this.empty();
    _this.append(pageCont);

    if (opt.showCenter){
        var contWidth = pageCont.width(),
            recNumWidth = recodeNumSel.width(),
            pageWidth = numList.width(),
            pageInfo = $(".pageInfo").width(),
            goStep = $(".goStep ").width(),
            pageConWidth = parseInt(pageWidth+pageInfo+goStep);

        var leftSpaceWidth = parseInt((contWidth - pageConWidth)/2 - recNumWidth);
        console.log(leftSpaceWidth);
        numList.css("margin-left", leftSpaceWidth);
    }


    recodeNumSel.find(".recodeNumSelected").click(function(){
        recodeNumSelList.toggle();
    });

    recodeNumSel.find(".recodeNumSelList .recNum").click(function(){
        recodeNumSelected.html($(this).data("num"));
        recodeNumSelList.hide();
    });
};

使用方法

将代码引入项目，
在指定标签中用microMallPager方法。

//html
   

//js
$("#pagination").microMallPager({
                //当前页码
                currPage: 1,
                //总页数
                totalPage: _this.totlePage,
                //总记录数
                totalNum: _this.eachData.Orders.length,
                gotoStep: false
            }); 

样式通过pagination下可以自行修改。