bootstrap paginator分页插件的两种使用方式实例详解


Posted in Javascript onNovember 14, 2017

分页有两种方式:

1. 前台分页:ajax一次请求获取全部数据,适合少量数据(万条数据以下);

$.ajax({
  type: "GET",
  url: "",//后台接口地址
  dataType: "json",
  success: function (msg) {
   var pages = Math.ceil(msg.data / 5);//data是数据总量 
   var element = $('#id');//对应ul的id
   element.bootstrapPaginator({
    bootstrapMajorVersion: 3,//bootstrap版本
    currentPage: page,//当前页面 
    numberOfPages: 5,//一页显示几个按钮(在ul里面生成5个li) 
    totalPages: pages //总页数
   });
  }
 });

注意:1. bootstrap3中分页的HTML部分要求使用ul标签;2. 前台写分页算法。

2. 后台分页:发送多次ajax,每次获取指定页数的数据(万条数据以上)。

$('#id').bootstrapPaginator({
    bootstrapMajorVersion: 3,//bootstrap版本
    currentPage: 1,//当前页码
    totalPages: data.cn,//总页数(后台传过来的数据)
    numberOfPages: 5,//一页显示几个按钮
    itemTexts: function (type, page, current) {
     switch (type) {
      case "first": return "首页";
      case "prev": return "上一页";
      case "next": return "下一页";
      case "last": return "末页";
      case "page": return page;
     }
    },//改写分页按钮字样
    onPageClicked: function (event, originalEvent, type, page) {
     $.ajax({
      url: '../../interface/xw_zxdt_list.php',
      type: 'post',
      data: {page: page},
      dataType: 'json',
      success: function (data) {
       tplData(data);//处理成功返回的数据
      }
     });
    }
   });

注意:1. bootstrap3中分页的HTML部分要求使用ul标签;2. 后台写分页算法。

ps:下面看下bootstrap-paginator 分页控件的使用

首先对js和css的引用

<link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css"/> 
<script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="reference/bootstrap-paginator.js"></script>

初始化分页控件

 <div id="page"></div>
<script type="text/javascript">
  $(function(){
   var options={
    bootstrapMajorVersion:1, //版本
    currentPage:1, //当前页数
    numberOfPages:5, //最多显示Page页
    totalPages:10, //所有数据可以显示的页数
    onPageClicked:function(e,originalEvent,type,page){
    }
   }
   $("#page").bootstrapPaginator(options);
  })
 </script>

如果bootstrapMajorVersion:1 时,则上面的分页标签用 div

如果bootstrapMajorVersion:3 时,则上面的分页标签用 ul

其中:currentPage 是当前你所在的页数

numberOfPages 是分页按钮可见的最多数

totalPages 是所有数据能分的页数(这些 options(选项)是在初始化分页控件的时候使用的。)

在onPageClicked 事件中  page 参数标识你点击页数时所在的页数。

完整代码如下:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css"/> 
 <script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script>
 <script type="text/javascript" src="reference/bootstrap-paginator.js"></script>
</head>
<body>
 <div id="page"></div>
 <script type="text/javascript">
  $(function(){
   var options={
    bootstrapMajorVersion:1, //版本
    currentPage:1, //当前页数
    numberOfPages:5, //最多显示Page页
    totalPages:10, //所有数据可以显示的页数
    onPageClicked:function(e,originalEvent,type,page){
     console.log("e");
     console.log(e);
     console.log("originalEvent");
     console.log(originalEvent);
     console.log("type");
     console.log(type);
     console.log("page");
     console.log(page);
    }
   }
   $("#page").bootstrapPaginator(options);
  })
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的bootstrap paginator分页插件的两种使用方式实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 变量基础知识
Nov 07 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 #Javascript
JavaScript函数绑定用法实例分析
Nov 14 #Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 #Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 #Javascript
JS中图片压缩的方法小结
Nov 14 #Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 #jQuery
Node.js使用Express.Router的方法
Nov 14 #Javascript
You might like
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
Python中的枚举类型示例介绍
2019/01/09 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Python获取时间戳代码实例
2019/09/24 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
大学生活学习的自我评价
2013/12/03 职场文书
社区庆八一活动方案
2014/02/02 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
千与千寻观后感
2015/06/04 职场文书
医院见习总结
2015/06/24 职场文书
Java spring定时任务详解
2021/10/05 Java/Android
Python标准库pathlib操作目录和文件
2021/11/20 Python
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python