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 相关文章推荐
围观tangram js库
Dec 28 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
JS处理一些简单计算题
Feb 24 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
JavaScript仿京东轮播图效果
Feb 25 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
PHP 截取字符串专题集合
2010/08/19 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
javascript调试说明
2010/06/07 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
python中线程和进程有何区别
2020/06/17 Python
如何对python的字典进行排序
2020/06/19 Python
python实现取余操作的简单实例
2020/08/16 Python
中文系师范生自荐信
2013/10/01 职场文书
护士毕业生自荐信
2014/02/07 职场文书
清扬洗发水广告词
2014/03/14 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
作文评语集锦
2014/12/25 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
详解Vue的列表渲染
2021/11/20 Vue.js