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


Posted in Javascript onFebruary 13, 2020

本文实例为大家分享了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 style="text-align:center;">
  <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)));
}

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

Javascript 相关文章推荐
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
JavaScript实现Tab选项卡切换
Feb 13 #Javascript
Angular 多模块项目构建过程
Feb 13 #Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 #Javascript
JavaScript实现省市区三级联动
Feb 13 #Javascript
jquery传参及获取方式(两种方式)
Feb 13 #jQuery
JS实现页面数据懒加载
Feb 13 #Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 #Javascript
You might like
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
亲戚结婚的请假条
2014/02/11 职场文书
共产党员公开承诺书
2014/03/25 职场文书
法人授权委托书样本
2014/09/19 职场文书
补充协议书
2015/01/28 职场文书
2015年度党员个人总结
2015/02/14 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书