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 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
ant design实现圈选功能
Dec 17 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 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 删除指定文件夹的实例讲解
2017/07/25 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python生成指定尺寸缩略图的示例
2014/05/07 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python+django实现文件上传
2016/01/17 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
初婚初育证明
2014/01/14 职场文书
一年级数学教学反思
2014/02/01 职场文书
活动总结怎么写啊
2014/05/07 职场文书
购房协议书范本
2014/10/02 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python