Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

之前做分页想过做淘宝的那个，但是因为是后台要求不高，就Bootstrap Paginator插件感觉还蛮容易上手，所以就选了它。

Bootstrap Paginator分页插件下载地址：

DownloadVisit
Project in GitHub

1.这是需要分页的页面放的 js函数：

1. <span style="font-size:14px;">function paging(page){
2. $.ajax({
3. type: "GET",
4. url: "${ctx}/api/v1/user/1/"+(page-1)+"/5",
5. dataType:"json",
6. success: function(msg){
7. ....//省略（查询出来数据）
8. }
9. });
10. $.ajax({
11. type: "GET",
12. url:"${ctx}/api/v1/user/count/1",
13. dataType:"json",
14. success:function(msg){
15. var pages = Math.ceil(msg.data/5);//这里data里面有数据总量
16. var element = $('#pageUl');//对应下面ul的ID
17. var options = {
18. bootstrapMajorVersion:3,
19. currentPage: page,//当前页面
20. numberOfPages: 5,//一页显示几个按钮（在ul里面生成5个li）
21. totalPages:pages //总页数
22. }
23. element.bootstrapPaginator(options);
24. }
25. });
26. }</span>

页面：

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

*li里面自动生成的

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

1. <span style="font-size:14px;">onPageClicked: function (event, originalEvent, type, page) {
2. //show the corresponding page and retrieve the newly built item related to the page clicked before for the event return
3. var currentTarget = $(event.currentTarget);
4. switch (type) {
5. case "first":
6. currentTarget.bootstrapPaginator("showFirst");
7. paging(page);
8. break;
9. //上一页
10. case "prev":
11. currentTarget.bootstrapPaginator("showPrevious");
12. paging(page);
13. break;
14. case "next":
15. currentTarget.bootstrapPaginator("showNext");
16. paging(page);
17. break;
18. case "last":
19. currentTarget.bootstrapPaginator("showLast");
20. paging(page);
21. break;
22. case "page":
23. currentTarget.bootstrapPaginator("show", page);
24. paging(page);
25. break;
26. }
27. },</span>

*在你点击的页面样式出来后调用paging（page）方法，这里的page源文件里的参数已经有了，直接传！

效果：当样式改变后，直接拿控件的page值进行ajax请求的发送！最后实现无刷新分页。