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 相关文章推荐
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
深入PHP FTP类的详解
2013/06/13 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
微信小程序自定义toast的实现代码
2018/11/16 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
详解anaconda安装步骤
2020/11/23 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
HTML5地理定位实例
2014/10/15 HTML / CSS
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
档案信息化建设方案
2014/05/16 职场文书
元旦趣味活动方案
2014/08/22 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
党支部书记岗位职责
2015/02/15 职场文书
python处理json数据文件
2022/04/11 Python