生活随笔
收集整理的這篇文章主要介紹了
Bootstrap Paginator分页插件+ajax
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Bootstrap Paginator分頁插件下載地址：
DownloadVisit Project in GitHub
?Bootstrap分頁插件屬性介紹： http://www.cnblogs.com/hqlong/p/6667766.html
?
1.這是需要分頁的頁面放的 js函數：
[javascript]?view plaincopy
<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?//總頁數
onPageChanged:function (event, originalEvent, typePage, currentPage) {
??????????????? //事件：typePage是被點擊的頁碼
??????????? } ?????????????????????}?
???????????????????element.bootstrapPaginator(options);??????????????????}??????????????});??????????}</span>?? 頁面： [html]?view plaincopy
<span?style="font-size:14px;"><ul?class="pagination"?id="pageUl">??</ul></span>?? *li里面自動生成的
2.最重要也是最核心的是要自己改下bootstrap-paginator.js源文件，如下：
[javascript]?view plaincopy
<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請求的發送！最后實現無刷新分頁。
?
?
?
?
?
?
?
轉載于:https://www.cnblogs.com/hqlong/p/6667794.html
總結
以上是生活随笔為你收集整理的Bootstrap Paginator分页插件+ajax的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
