温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

bootstrap-paginator服务器端分页使用的示例分析

发布时间:2021-06-10 09:50:10 来源:亿速云 阅读:307 作者:小新 栏目:web开发

这篇文章主要为大家展示了“bootstrap-paginator服务器端分页使用的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“bootstrap-paginator服务器端分页使用的示例分析”这篇文章吧。

HTML:

<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-paginator.min.js"></script>

 <!-- 主内容列表 -->
 <ol class="list-group" id="infoList>
  <li class="list-group-item"><span class="fa fa-cog fa-spin fa-fw"></span>正在读取数据……</li>
</ol>

<!-- 分页导航器 -->
<div >
  <ul id="useroption" class="pagination"></ul>
</div>

JS:

//读取消息列表*************************************************//
 queryInfoList(paraValue);
 function queryInfoList(bid)
 {
  $.ajax({
   async: true,
   type: "get",
   url: "../php/list.php",//向后端发送请求,后端为PHP
   dataType: "json", //要求后端返回数据为JSON格式
   data: { page: '1',bid:bid,act:'getInfoList' }, //请求参数,首次请求页码为1
   cache: false,
   success: function (data)
   {
    
    lis = "";
    for (eachRs in data.rs)
    {//拼接对应<li>需要的值
     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>";
    };
    $("#infoList").html(lis);

    var currentPage = data.CurrentPage; //当前页数
    var pageCount = data.pageCount; //总页数
  
    var options = {
     bootstrapMajorVersion: 4, //版本
     currentPage: currentPage, //当前页数
     totalPages: pageCount, //总页数
     numberOfPages: 10,//分页器显示10条
     shouldShowPage: true,//是否显示该按钮
     itemTexts: function (type, page, current)
     {
      switch (type)
      {
       case "first":
        return "首页";
       case "prev":
        return "上页";
       case "next":
        return "下页";
       case "last":
        return "末页";
       case "page":
        return page;
      }
     },
     
     //点击事件,用于通过Ajax来刷新整个list列表
     onPageClicked: function (event, originalEvent, type, page)
     {
      $.ajax({
       async: true,
       url: "../php/list.php",
       type: "get",
       dataType: "json",
       data: { page: page,bid:bid ,act:'getInfoList'},
       cache: false,
       success: function (data)
       {
        lis = "";
        for (eachRs in data.rs)
        {//拼接对应<li>需要的值
         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>";
        };
        $("#infoList").html(lis);
       }/*success*/
      });
     }
    };
    $('#useroption').bootstrapPaginator(options);
   }/*success*/
  });
 }

PHP:

if($act=='getInfoList')
{
 $bid=addslashes($_REQUEST['bid']);
 $curPage=addslashes($_REQUEST['page']);//当前页码
 $pageSize=15; //每页条数
 $rsAll=$dbh->query("select count(id) from article where board=$bid and wid=30 and auditor is not null and accessable=1")->fetchAll();
 $rsAllCount=$rsAll[0][0];//总记录数

 //计算总页数
 if($rsAllCount%$pageSize==0)
  $pageAllCount=$rsAllCount/$pageSize;
 else
  $pageAllCount=intval($rsAllCount/$pageSize)+1;

 $beginRs=($curPage-1)*$pageSize; //计算起始记录
 $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";
 $rsCur=$dbh->query($curRsSql)->fetchAll();
 echo(json_encode(array("rs"=>$rsCur,"pageCount"=>$pageAllCount,"curPage"=>$curPage,"sql"=>$curRsSql)));
}

以上是“bootstrap-paginator服务器端分页使用的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI