BootstrapPaginator自定义封装异步分页

依赖的JS

bootstrap.min.js
bootstrap-paginator.min.js`

以及自定义封装的pageUtil.js

/**
 * 异步分页工具
 * author:liuyang
 * Date:2018年12月20日 13:59:49
 */
/**
 * 展示分页插件
 * @param pageObj 分页对象
 * @param callback 需要回调的查询数据方法
 * @param ajax_url 调用后台接口地址
 * @param ajax_data 需要传递后台的参数json
 * @param content_area 后台返回数据展示区域
 * @param page_area 分页插件展示区域
 * @param page_num 页数
 * @param page_size 每页条数
 * @param loading_content 异步调用后台时页面的loading效果
 * @param nodata_content 后台返回空数据时的展示信息
 * @param makeHtmlCallback 后台返回数据后渲染数据的回调方法
 */
function setPage(pageObj, callback, ajax_url, ajax_data, content_area, page_area, page_num, page_size, loading_content, nodata_content, makeHtmlCallback) {
    $(page_area).bootstrapPaginator({
        bootstrapMajorVersion: 3, //bootstrap的版本要求
        currentPage: pageObj.pageNum,//当前页数
        totalPages: pageObj.pages,//总页数
         numberOfPages: 5,//每页记录数
        /*设置显示的样式，默认是箭头	*/
        itemTexts: function (type, page, current) {
            console.log("type=" + type + ", page=" + page + "current=" + current);
            switch (type) {
                case "first": // type值固定
                    return '<span class="glyphicon glyphicon-fast-backward"></span>';
                case "prev":
                    return '<span class="glyphicon glyphicon-step-backward"></span>';
                case "next":
                    return '<span class="glyphicon glyphicon-step-forward"></span>';
                case "last":
                    return '<span class="glyphicon glyphicon-fast-forward"></span>';
                case "page":
                    return page;
            }
        },
        tooltipTitles: function (type, page, current) {
            switch (type) {
                case "first": // type值固定
                    return '前往首页';
                case "prev":
                    return '前往上一页';
                case "next":
                    return '前往下一页';
                case "last":
                    return '前往尾页';
                case "page":
                    return '前往第' + page + '页';
            }
        },
        //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
        onPageClicked: function (event, originalEvent, type, page) {
        	//为了使代码简洁易维护，所以这用了回调
            callback && callback(ajax_url, ajax_data, content_area, page_area, page, page_size, loading_content, nodata_content, makeHtmlCallback)
        },
       
    })
}

/**
 * 异步分页查询
 * @param ajax_url 调用后台接口地址
 * @param ajax_data 需要传递后台的参数json
 * @param content_area 后台返回数据展示区域
 * @param page_area 分页插件展示区域
 * @param page_num 页数
 * @param page_size 每页条数
 * @param loading_content 异步调用后台时页面的loading效果
 * @param nodata_content 后台返回空数据时的展示信息
 * @param makeHtmlCallback 后台返回数据后渲染数据的回调方法
 */
function pageStart(ajax_url, ajax_data, content_area, page_area, page_num, page_size, loading_content, nodata_content, makeHtmlCallback) {
    $("#" + content_area).html(loading_content);
    $.ajax({
        type: "GET",
        url: ajax_url,
        dataType: "json",
        data: $.extend({'pageNum': page_num, 'pageSize': page_size}, ajax_data),
        success: function (data) {
            //后台返回的需要显示的信息列表
            var pageObj = data.page;
            var listObj = data.list;
            var html_ = "";
            $.each(listObj, function (i, n) {
                //makeHtml需要页面重写
                html_ += makeHtmlCallback(n);
            });
            //根据自己需求再进行前端渲染
         
            $("#" + content_area).empty();
            $(page_area).empty();
            if (html_ == "") {
                $("#" + content_area).html(nodata_content);
                return false;
            }
            $("#" + content_area).html(html_);

            setPage(pageObj, pageStart, ajax_url, ajax_data, content_area, page_area, page_num, page_size, loading_content, nodata_content, makeHtmlCallback);
        }
    })
}

然后是调用处：

 pageStart(
 		“requestControll/method”,//这里写自己项目真实的请求地址，必须是异步的
        {},//这个是除了分页基本数据外，还需要带入到后台的json
        "content",//这个是异步请求回来后数据加载到哪个区域，根据id，例如<div id="content"></div>
        'pageContent',//这个是需要显示分页空间的区域，写法同上
       pageNum, //这个是个变量，当前页数
       pageSize, //这也是变量，显示条数
        "",//这里可以为空，含义是加载数据未返回时，展示的loading效果
        "noRecord",//这里是后台返回后，如果没有数据，展示的信息，例如：当前没有数据
        makeHtml //这是个方法名，用于回调函数
        );

function makeHtml(){
 var html_ = "<tr><td>.....";//具体业务自己写
 return html_;
}

整体来说还是挺简单的，但是有很多不足的地方。比如页面无法控制每页显示多少条数（10、20、50），共计多少页等等（如果有大神知道，请及时指教）.
目前页面的每页显示条数都是后台定义的一个常量，值为10