bootstrap-paginator服务器端分页使用方法详解

本文实例为大家分享了bootstrap-paginator服务器端分页的基本用法，供大家参考，具体内容如下

HTML：

1. <script src="../js/jquery-3.2.1.min.js"></script>
2. <script src="../js/bootstrap.min.js"></script>
3. <script src="../js/bootstrap-paginator.min.js"></script>
4.  
5. <!-- 主内容列表 -->
6. <ol class="list-group" id="infoList>
7. <li class="list-group-item"><span class="fa fa-cog fa-spin fa-fw"></span>正在读取数据……</li>
8. </ol>
9.  
10. <!-- 分页导航器 -->
11. <div style="text-align:center;">
12. <ul id="useroption" class="pagination"></ul>
13. </div>

JS：

1. //读取消息列表*************************************************//
2. queryInfoList(paraValue);
3. function queryInfoList(bid)
4. {
5. $.ajax({
6. async: true,
7. type: "get",
8. url: "../php/list.php",//向后端发送请求，后端为PHP
9. dataType: "json", //要求后端返回数据为JSON格式
10. data: { page: '1',bid:bid,act:'getInfoList' }, //请求参数，首次请求页码为1
11. cache: false,
12. success: function (data)
13. {
14.  
15. lis = "";
16. for (eachRs in data.rs)
17. {//拼接对应<li>需要的值
18. lis += "<li class='list-group-item'><a title='"+data.rs[eachRs]['title']+"' class='newsLink' href='read.html?id="+data.rs[eachRs]['id']+"'>" + data.rs[eachRs]['title'] + "</a> <span class='text-muted pull-right'>"+data.rs[eachRs]['posttime']+"</span></li>";
19. };
20. $("#infoList").html(lis);
21.  
22. var currentPage = data.CurrentPage; //当前页数
23. var pageCount = data.pageCount; //总页数
24.  
25. var options = {
26. bootstrapMajorVersion: 4, //版本
27. currentPage: currentPage, //当前页数
28. totalPages: pageCount, //总页数
29. numberOfPages: 10,//分页器显示10条
30. shouldShowPage: true,//是否显示该按钮
31. itemTexts: function (type, page, current)
32. {
33. switch (type)
34. {
35. case "first":
36. return "首页";
37. case "prev":
38. return "上页";
39. case "next":
40. return "下页";
41. case "last":
42. return "末页";
43. case "page":
44. return page;
45. }
46. },
47.  
48. //点击事件，用于通过Ajax来刷新整个list列表
49. onPageClicked: function (event, originalEvent, type, page)
50. {
51. $.ajax({
52. async: true,
53. url: "../php/list.php",
54. type: "get",
55. dataType: "json",
56. data: { page: page,bid:bid ,act:'getInfoList'},
57. cache: false,
58. success: function (data)
59. {
60. lis = "";
61. for (eachRs in data.rs)
62. {//拼接对应<li>需要的值
63. lis += "<li class='list-group-item'><a title='"+data.rs[eachRs]['title']+"' class='newsLink' href='read.html?id="+data.rs[eachRs]['id']+"'>" + data.rs[eachRs]['title'] + "</a> <span class='text-muted pull-right'>"+data.rs[eachRs]['posttime']+"</span></li>";
64. };
65. $("#infoList").html(lis);
66. }/*success*/
67. });
68. }
69. };
70. $('#useroption').bootstrapPaginator(options);
71. }/*success*/
72. });
73. }

PHP：

1. if($act=='getInfoList')
2. {
3. $bid=addslashes($_REQUEST['bid']);
4. $curPage=addslashes($_REQUEST['page']);//当前页码
5. $pageSize=15; //每页条数
6. $rsAll=$dbh->query("select count(id) from article where board=$bid and wid=30 and auditor is not null and accessable=1")->fetchAll();
7. $rsAllCount=$rsAll[0][0];//总记录数
8.  
9. //计算总页数
10. if($rsAllCount%$pageSize==0)
11. $pageAllCount=$rsAllCount/$pageSize;
12. else
13. $pageAllCount=intval($rsAllCount/$pageSize)+1;
14.  
15. $beginRs=($curPage-1)*$pageSize; //计算起始记录
16. $curRsSql="select id,title, posttime from article where board=$bid and wid=30 and auditor is not null and accessable=1 order by posttime desc limit $beginRs,$pageSize";
17. $rsCur=$dbh->query($curRsSql)->fetchAll();
18. echo(json_encode(array("rs"=>$rsCur,"pageCount"=>$pageAllCount,"curPage"=>$curPage,"sql"=>$curRsSql)));
19. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。