Bootstrap Paginator分頁外掛程式與ajax結合實現動態無刷新分頁效果

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 = $(&#39;#pageUl&#39;);//对应下面ul的ID
var options = {
bootstrapMajorVersion:3,
currentPage: page,//当前页面
numberOfPages: 5,//一页显示几个按钮（在ul里面生成5个li）
totalPages:pages //总页数
}
element.bootstrapPaginator(options);
}
});
}</span>

   

*li裡面自動生成的

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

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

   

*在你的頁面樣式出來後點擊paging（page）方法，這裡點擊paging（page）方法的page原始檔裡的參數已經有了，直接傳！

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

以上所述是小編給大家介紹的Bootstrap Paginator分頁插件與ajax相結合實現動態無刷新分頁效果的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對PHP中文網的支持！

更多Bootstrap Paginator分頁插件與ajax相結合實現動態無刷新分頁效果相關文章請關注PHP中文網！