关于nprogress和bootstrap的paginator

野性酷女 2021-12-07 13:13 210阅读 0赞

### nprogress ###

进度条，一般用于发出ajax请求时使用  
引入文件

只需要调用两个方法

/*在ajax开始请求的时候  把进度条显示出来*/
    $(window).ajaxStart(function(){
        NProgress.start();
    });
    /*在ajax结束请求的时候  把进度条完成*/
    $(window).ajaxStart(function(){
        NProgress.done();
    });

### paginator ###

用于对数据渲染的分页操作，通常数据是ajax获取的  
引入文件

这里引入template-native.js是使用模板引擎来渲染数据  
使用

/*
         *
         * @param pageCurr 当前所在页
         * @param pageSum 总页数
         * @param callback 调用ajax
         */
    var setPaginator = function(pageCurr,pageSum,callback){
            /*获取需要初始的元素 使用bootstrapPaginator方法*/
            $('.pagination').bootstrapPaginator({
                /*当前使用的是3版本的bootstrap*/
                bootstrapMajorVersion:3,
                /*配置的字体大小是小号*/
                size:'small',
                /*当前页*/
                currentPage:pageCurr,
                /*一共多少页*/
                totalPages:pageSum,
                /*点击页面事件*/
                onPageClicked:function(event, originalEvent, type, page){
                    /*改变当前页再渲染 page当前点击的按钮的页面*/
                    currPage = page;
                    callback && callback();
                }
            });
        }

然后在合适的地方调用就OK了