bootstrap paginator分页前后台用法示例


Posted in Javascript onJune 17, 2017

bootstrap paginator分页前后台用法示例,供大家参考,具体内容如下

准备工作:

bootstrap-paginator.js 插件
github开源项目百度自行下载

引入js文件(JQuery1.8+bootstrap.min.js+bootstrap.css+bootstrap-paginator.js)

<!--路径根据自己项目修改-->
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css" rel="external nofollow" >
<script type="application/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="application/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
<script type="application/javascript" src="/bootstrap/js/bootstrap-paginator.min.js"></script>
<!--jsp页面只需一个 ul 给定 class 和 id-->
<ul class="pagination" id="page"></ul>

JS 中列表页面请求

各种异步请求都适用(本例采用angular的 $http 请求)
options 是插件的各项设置
bootstrapMajorVersion:3 版本声明必须
onPageClicked:点击页数,page就是当前页
itemTexts属性将<<等符号替换为上一页等文字(不写也可以) 

$http.post('../userCtrl/getUsers').success(function (response) {
 var pageCount = response.total;
 $scope.users = response.users;

 var options = {
  currentPage: 1,
  totalPages: (pageCount%10) == 0?(pageCount/10):(pageCount/10)+1,
  numberOfPages:10,
  bootstrapMajorVersion:3,
  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){
   $.post(
    "../userCtrl/getUsers",
    {"page":page},
    function (map) {
     $scope.users = map.users;
     $scope.$apply();
    },
    "json"
   );
  }
 }
 $('#page').bootstrapPaginator(options);

}).error(function (response) {
 alert("列表请求出错");
});

bootstrap paginator分页前后台用法示例

后台操作

分页之后的数据
总记录数或总页数 

/**
 * 请求列表数据
 * @return users
 */
@RequestMapping("getUsers")
public @ResponseBody Map<String,Object> selectUsers(Integer page){
 if(page==null)page=1;//页面第一次加载,默认为首页
 List<User> users = userService.selectUsers(page);
 Integer total = userService.getTotal();//总记录数
 Map<String,Object> map = new HashMap<String,Object>();
 map.put("users",users);
 map.put("total",total);
 return map;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 使用手册(七)
Sep 23 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
80行代码写一个Webpack插件并发布到npm
May 24 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 #Javascript
深入理解Webpack 中路径的配置
Jun 17 #Javascript
详解Vue组件之间的数据通信实例
Jun 17 #Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 #Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 #Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 #Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 #Javascript
You might like
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
PHP递归的三种常用方式
2019/02/28 PHP
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
前端常见跨域解决方案(全)
2017/09/19 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
python交换两个变量的值方法
2019/01/12 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Python中logging日志库实例详解
2020/02/19 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
python实现猜数游戏
2020/03/27 Python
用python实现学生管理系统
2020/07/24 Python
通俗讲解python 装饰器
2020/09/07 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
小学敬老月活动方案
2014/02/11 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python