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 相关文章推荐
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 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
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
详解jquery选择器的原理
2017/08/01 jQuery
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
node后端服务保活的实现
2019/11/10 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
python对字典进行排序实例
2014/09/25 Python
python创建和删除目录的方法
2015/04/29 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
会计岗位职责范本
2014/03/07 职场文书
药学职务聘任书
2014/03/29 职场文书
护理专业求职信
2014/06/15 职场文书
烈士陵园观后感
2015/06/08 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
Java中的继承、多态以及封装
2022/04/11 Java/Android