Bootstrap Paginator分頁外掛程式與ajax相結合實現動態無重新整理分頁效果_javascript技巧

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請求的發送！最後實現無重新整理分頁。

以上所述是小編給大家介紹的Bootstrap Paginator分頁外掛程式與ajax相結合實現動態無重新整理分頁效果的相關知識，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！