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 相关文章推荐
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
js实现继承的5种方式
Dec 01 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
js实现简单进度条效果
Mar 25 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
php检测useragent版本示例
2014/03/24 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
python中requests和https使用简单示例
2018/01/18 Python
python中退出多层循环的方法
2018/11/27 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
2014年最新学习全国两会精神心得
2014/03/17 职场文书
医院志愿者活动总结
2015/05/06 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python