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 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
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程序员工具
2008/05/26 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
浅谈JavaScript的事件
2015/02/27 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
vue实现购物车的监听
2020/04/20 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
python实现简单的学生管理系统
2021/02/22 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
优秀中专生推荐信
2013/11/17 职场文书
中学生差生评语
2014/01/30 职场文书
银行优秀员工事迹
2014/02/06 职场文书
文化宣传方案
2014/03/13 职场文书
施工员岗位职责
2014/03/16 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
踏青活动策划方案
2014/08/19 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
交通事故起诉书
2015/05/19 职场文书
机关工会工作总结2015
2015/05/26 职场文书
跑吧孩子观后感
2015/06/10 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
Nginx 匹配方式
2022/05/15 Servers