Bootstrap Paginator分頁插件+ajax 實現動態無刷新分頁

之前做分頁想過做淘寶的那個，但是因為是后台要求不高，就Bootstrap Paginator插件感覺還蠻容易上手，所以就選了它。

Bootstrap Paginator分頁插件下載地址：

DownloadVisit Project in GitHub

1.這是需要分頁的頁面放的 js函數：

<span style="font-size:14px;">function paging(page){
            $.ajax({
               type: "GET",
               url: "${ctx}/api/v1/user/1/"+(page-1)+"/5",
               dataType:"json",
               success: function(msg){
                 ....//省略（查詢出來數據）
               }
            });
            $.ajax({
                type: "GET",
                url:"${ctx}/api/v1/user/count/1",
                dataType:"json",
                success:function(msg){
                    var pages = Math.ceil(msg.data/5);//這里data里面有數據總量
                    var element = $('#pageUl');//對應下面ul的ID
                    var options = {
                        bootstrapMajorVersion:3,
                        currentPage: page,//當前頁面
                        numberOfPages: 5,//一頁顯示幾個按鈕（在ul里面生成5個li）
                        totalPages:pages //總頁數
                    }
                   element.bootstrapPaginator(options);
                }
            });
        }</span>

頁面：

<span style="font-size:14px;"><ul class="pagination" id="pageUl">
</ul></span>

*li里面自動生成的

2.最重要也是最核心的是要自己改下bootstrap-paginator.js源文件，如下：

<span style="font-size:14px;">onPageClicked: function (event, originalEvent, type, page) {

            //show the corresponding page and retrieve the newly built item related to the page clicked before for the event return

            var currentTarget = $(event.currentTarget);

            switch (type) {
            case "first":
                currentTarget.bootstrapPaginator("showFirst");
                paging(page);
                break;
                //上一頁
            case "prev":
                currentTarget.bootstrapPaginator("showPrevious");
                paging(page);
                break;
            case "next":
                currentTarget.bootstrapPaginator("showNext");
                paging(page);
                break;
            case "last":
                currentTarget.bootstrapPaginator("showLast");
                paging(page);
                break;
            case "page":
                currentTarget.bootstrapPaginator("show", page);
                paging(page);
                break;
            }
        },</span>

*在你點擊的頁面樣式出來后調用paging（page）方法，這里的page源文件里的參數已經有了，直接傳！

效果：當樣式改變后，直接拿控件的page值進行ajax請求的發送！最后實現無刷新分頁。