关于nprogress和bootstrap的paginator

nprogress

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

<link rel="stylesheet" href="assets/nprogress/nprogress.css"/>

<script src="assets/nprogress/nprogress.js"></script>

只需要调用两个方法

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

paginator

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

<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"/>
 <link rel="stylesheet" href="assets/bootstrap-validator/css/bootstrapValidator.min.css"/>

<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/artTemplate/template-native.js"></script>
<script src="assets/bootstrap-paginator/bootstrap-paginator.min.js"></script>

这里引入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了