Bootstrap Paginator分頁(yè)插件下載地址：
DownloadVisit Project in GitHub
1.這是需要分頁(yè)的頁(yè)面放的 js函數(shù)：
<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){ ....//省略（查詢出來(lái)數(shù)據(jù)） } }); $.ajax({ type: "GET", url:"${ctx}/api/v1/user/count/1", dataType:"json", success:function(msg){ var pages = Math.ceil(msg.data/5);//這里data里面有數(shù)據(jù)總量 var element = $('#pageUl');//對(duì)應(yīng)下面ul的ID var options = { bootstrapMajorVersion:3, currentPage: page,//當(dāng)前頁(yè)面 numberOfPages: 5,//一頁(yè)顯示幾個(gè)按鈕（在ul里面生成5個(gè)li） totalPages:pages //總頁(yè)數(shù) } element.bootstrapPaginator(options); } }); }</span> 頁(yè)面：
<span style="font-size:14px;"><ul class="pagination" id="pageUl"> </ul></span>
*li里面自動(dòng)生成的
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; //上一頁(yè) 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> *在你點(diǎn)擊的頁(yè)面樣式出來(lái)后調(diào)用paging（page）方法，這里的page源文件里的參數(shù)已經(jīng)有了，直接傳！
效果：當(dāng)樣式改變后，直接拿控件的page值進(jìn)行ajax請(qǐng)求的發(fā)送！最后實(shí)現(xiàn)無(wú)刷新分頁(yè)。
以上所述是小編給大家介紹的Bootstrap Paginator分頁(yè)插件與ajax相結(jié)合實(shí)現(xiàn)動(dòng)態(tài)無(wú)刷新分頁(yè)效果的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
