1、下載http://plugins.jquery.com/bootstrap-paginator/

2、引用<script src="/static/bootstrap/js/bootstrap-paginator.min.js"></script>

3、首先定義一個html標簽ul用以顯示分頁<ul style="margin: 0;" id="bp-3-Paginator-sm"></ul>

4、定義一個公共的js方法用來控制分頁信息

//顯示分頁信息
function pageInfo(totalNum, page_size, currentPage){
    //分頁顯示數據
    var options = {
        size                  : "small",//設置顯示大小
        bootstrapMajorVersion : 3,
        currentPage           : currentPage||1,//設置當前頁，默認起始頁為第一頁
        numberOfPages         : 5,//每次展示多少頁
        totalPages            : Math.ceil(totalNum/page_size),//總頁數
        alignment             : "left",//顯示位置
        useBootstrapTooltip   : false,//是否顯示tip提示框
        itemTexts: function (type, page, current) {//如下的代碼是將頁眉顯示的中文顯示我們自定義的中文。
            switch (type) {
                case "first" : return "首頁";
                case "prev"  : return "上一頁";
                case "next"  : return "下一頁";
                case "last"  : return "末頁";
                case "page"  : return page;
            }
        },
        onPageClicked: function(e,originalEvent,type,page){//點擊頁數時，觸發該方法
            var page_size = $("#page_size").val();
            test(page_size, page);//調用ajax方法,如果這裏還需要校驗查詢條件的話，可以寫個單獨的js方法，在此處調用該方法，在校驗方法中去調用ajax方法
        },  
    };
    $(‘#bp-3-Paginator-sm‘).bootstrapPaginator(options);
}

5、頁面加載的時候顯示方式

$(function() {
    pageInfo(totalNum, page_size, 1);//默認顯示第一頁
});

6、ajax方式顯示

function test(page_size, page_index){
    $.ajax({
        url:"",//請求URL
        type:‘GET‘, //請求方法
        data:{"param1" : value1},//請求參數
        dataType:"json", //返回的數據格式：json/xml/html/script/jsonp/text
        beforeSend:function(xhr){
            //請求之前要做的事情,此操作的結果不會影響下面方法的執行
        },
        success:function(data,textStatus,jqXHR){
            //請求成功要做的事情
            //關於總數據多少，每頁顯示多少數據，總工多少頁，這些數據在這邊更新
            pageInfo(data.totalNum, page_size, page_index)
            return false;
        },
        error:function(xhr,textStatus){
            //請求異常做的事情
            return false;
        },
        complete:function(){
            //最後要做的事情
    }});
}

bootstrap-paginator + ajax 實現動態翻頁功能