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判断IE版本号简单实用且向后兼容
Sep 11 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
javascript中递归的两种写法
Jan 17 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 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 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
PHP框架性能测试报告
2016/05/08 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
匹配任意字符的正则表达式写法
2010/04/29 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
vue实现表格数据的增删改查
2017/07/10 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
预备党员转正考核材料
2014/06/03 职场文书
2014年协会工作总结
2014/11/22 职场文书
离婚协议书格式
2015/01/26 职场文书
学习保证书100字
2015/02/26 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
JS中如何优雅的使用async await详解
2021/10/05 Javascript
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技