电脑系统城官网 - 一键重装系统-Win7旗舰版/win10 64位系统下载,唯一官网:www.pcxitongcheng.com!

当前位置:首页 > 网络编程 > JavaScript > 详细页面

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

时间:2020-02-13来源:系统城作者:电脑系统城

本文实例为大家分享了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. }

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

分享到:

相关信息

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载

公众号