js 分页插件(jQuery)

2018-06-24 01:47:36来源：未知阅读 ()

参考：http://www.jb51.net/article/117191.htm 侵删

css 部分

@charset "utf=8";
*{
 box-sizing: border-box;
 padding: 0;
 margin: 0;
}
.page{
 font-size: 13px;
 text-align: center;
 margin-top: 20px;
}
.page .page_to{
 display: inline-block;
 max-width: 250px;
}
.page .page_to li{
 display: inline-block;
 width: auto;
 height: auto;
 border: 1px solid #ddd;
 padding:5px 10px;
 border-left-width: 0;
 color: #323232;
 cursor: pointer;
}
.page .page_to li.page_hide{
 display: none;
}
.page .page_to li:hover{
 color: #32C2CD;
 background-color: #f4f4f4;
 border-color: #DDDDDD;
}
.page .page_to li:first-child{
 border-left-width: 1px;
}
.page .page_jump{
 display: inline-block;
 width: 180px;
}
.page .page_jump input.page_jump_input{
 width: 52px;
 height: 28px;
 text-align: center;
 text-decoration: none;
 background-color: #fff;
 border: 1px solid #ddd;
 margin:0 4px;
}
.page .page_jump input.page_jump_btn{
 display: inline-block;
 padding: 2px 10px;
 margin-left: 5px;
 font-size: 14px;
 font-weight: 400;
 line-height: 1.42857143;
 text-align: center;
 white-space: nowrap;
 /*vertical-align: middle;*/
 -ms-touch-action: manipulation;
 touch-action: manipulation;
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 border: 1px solid transparent;
 border-radius: 4px;
 background-color: #32c5d2;
 color: #FFFFFF;
 font-weight: bold;
}

js 部分

(function($, window, undefined) {

    var curPage = '',
        //跳转是否有值
        jumpVal = '',
        //从DOM中重新获取数据总数/总页数
        lists = '',
        totals = '',
        //是否返回值
        isTrue = false;

    var Page = function(opts) {
        this.settings = $.extend({}, Page.defaults, opts);
        curPage = this.settings.initPage;
        totals = this.settings.totalPages;
        jumpVal = this.settings.inputVal;
        this.init();
    };

    //默认配置
    Page.defaults = {
        container: '.page',
        setPos: 'body',
        totalPages: null,
        totalLists: null,
        initPage: 1,
        inputVal: 1,
        callBack: null
    };

    Page.prototype = {
        init: function() {
            this.create();
        },
        create: function() {
            var _template = '<div class="page">' +
                '<span class="page_details">' +
                '共<span class="page_num">' + this.settings.totalLists + '</span>条记录，' +
                '第<span class="page_current">' + curPage + '</span>/' +
                '<span class="page_size">' + this.settings.totalPages + '</span>页' +
                '</span>' +
                '<div class="page_to">' +
                '<ul class="flex_parent">' +
                '<li class="page_first flex_child">首页</li>' +
                '<li class="page_pre page_hide flex_child">? 上一页</li>' +
                '<li class="page_next flex_child">下一页 ?</li>' +
                '<li class="page_last flex_child">末页</li>' +
                '</ul>' +
                '</div>' +
                '<div class="page_jump">' +
                '<span>第：<input type="number" class="page_jump_input" value="' + this.settings.inputVal + '">页</span>' +
                '<input type="button" class="page_jump_btn" value="Go">' +
                '</div>' +
                '</div>';
            $(this.settings.setPos).append(_template);
            this.refreshDom();
            this.bindEvent();
        },
        bindEvent: function() {
            var _this = this;
            //跳转首页
            $(this.settings.container).on("click", ".page_first", function() {

                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();

                if ($.isFunction(_this.settings.callBack)) {
                    curPage = 1;
                    isTrue = _this.settings.callBack(1);
                    if (isTrue) {
                        _this.refreshDom();
                        $(_this.settings.container).find(".page_current").text(1);
                        $(_this.settings.container).find(".page_jump_input").val(curPage);
                    }
                }
            });
            //跳转上一页
            $(this.settings.container).on("click", ".page_pre", function() {

                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();

                if ($.isFunction(_this.settings.callBack)) {
                    if (curPage > 1) {
                        curPage = curPage - 1;
                        isTrue = _this.settings.callBack(curPage);
                        if (isTrue) {
                            _this.refreshDom();
                            $(_this.settings.container).find(".page_current").text(curPage);
                            $(_this.settings.container).find(".page_jump_input").val(curPage);
                        }
                    }
                }
            });
            //跳转下一页
            $(this.settings.container).on("click", ".page_next", function() {
                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();
                if ($.isFunction(_this.settings.callBack)) {
                    if (curPage < totals) {
                        curPage = curPage + 1;
                        isTrue = _this.settings.callBack(curPage);
                        if (isTrue) {
                            _this.refreshDom();
                            $(_this.settings.container).find(".page_current").text(curPage);
                            $(_this.settings.container).find(".page_jump_input").val(curPage);
                        }
                    }
                }
            });
            //跳转末页
            $(this.settings.container).on("click", ".page_last", function() {

                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();

                if ($.isFunction(_this.settings.callBack)) {
                    curPage = totals;
                    isTrue = _this.settings.callBack(curPage);
                    if (isTrue) {
                        _this.refreshDom();
                        $(_this.settings.container).find(".page_current").text(totals);
                        $(_this.settings.container).find(".page_jump_input").val(curPage);
                    }
                }
            });
            //Go跳转
            $(this.settings.container).on("click", ".page_jump_btn", function() {
                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();

                if ($.isFunction(_this.settings.callBack)) {
                    jumpVal = Number($(_this.settings.container).find("input.page_jump_input").val());
                    // console.log('跳转的页数：' + jumpVal + ';跳转之前的页数：' + curPage);
                    isTrue = _this.settings.callBack(jumpVal);
                    if (jumpVal >= 1 && jumpVal <= totals) {
                        curPage = jumpVal;
                        // isTrue = _this.settings.callBack(curPage);
                        if (isTrue) {
                            _this.refreshDom();
                            $(_this.settings.container).find(".page_current").text(curPage);
                            $(_this.settings.container).find(".page_jump_input").val(curPage);
                        }
                    } else {
                        jumpVal = curPage;
                    }
                }
            });
        },
        refreshDom: function() {
            $(this.settings.container).find("li.flex_child").removeClass("page_hide");
            if (Number(totals) == 1) {
                $(this.settings.container).find(".page_pre").addClass("page_hide");
                $(this.settings.container).find(".page_next").addClass("page_hide");
            } else if (Number(totals) == 2) {
                if (Number(curPage) == 1) {
                    $(this.settings.container).find(".page_pre").addClass("page_hide");
                } else {
                    $(this.settings.container).find(".page_next").addClass("page_hide");
                }
            } else if (Number(curPage) == 1 && Number(totals) > 2) {
                $(this.settings.container).find(".page_pre").addClass("page_hide");
            } else if (Number(curPage) == Number(totals) && Number(totals) > 2) {
                $(this.settings.container).find(".page_next").addClass("page_hide");
            }
        }
    };

    var pageInit = function(opts) {
        return new Page(opts);
    };

    window.pageInit = $.pageInit = pageInit;

})(jQuery, window, undefined);

调用

function page(){
    $.pageInit({
        container: '.page', //容器：默认page
        setPos: '.pageBox', //放置位置：默认body
        totalPages: totalPages, //总页数：必填（后台返回的，加载列表可以取到）
        totalLists: totalCount, //数据总数：必填（后台返回的，加载列表可以取到）
        initPage: pageNo, //初始页码：默认1（后台会返回，自己也可以定义）
        inputVal: 1, //设置跳转的input值：默认1
        //要执行的函数：默认null，必须为fn且返回true则可执行分页，false则不执行
        callBack: function(n) {
            var flag = true;
　　　　　　　console.log(n);
            getCustomerList(n); //getCustomerList 是加载列表的方法；n 为返回的页码数，
            return flag;
        }
    });
};