bootstrap paginator分页前后台用法示例

 更新时间:2017年06月17日 14:31:25   作者:m0_37893932  
这篇文章主要为大家详细介绍了bootstrap paginator分页前后台用法示例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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("列表请求出错");
});

后台操作

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

/**
 * 请求列表数据
 * @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;
}

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

相关文章

  • JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码

    JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码

    这篇文章主要介绍了JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码,需要的朋友可以参考下
    2018-04-04
  • JavaScript对象扩展方法的用法详解

    JavaScript对象扩展方法的用法详解

    JavaScript对象中的可扩展性指的是:是否可以给对象添加新属性。所有的内置对象和自定义对象显示的都是可扩展的,对于宿主对象,则由JavaScript引擎决定
    2022-11-11
  • 7个你应该知道的JS原生错误类型

    7个你应该知道的JS原生错误类型

    这篇文章主要介绍了7个你应该知道的JS原生错误类型,对此感兴趣的同学,可以参考一下
    2021-04-04
  • 关于字符串和对象互转以及JSON.parse()的坑

    关于字符串和对象互转以及JSON.parse()的坑

    这篇文章主要介绍了关于字符串和对象互转以及JSON.parse()的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • JavaScript事件类型中焦点、鼠标和滚轮事件详解

    JavaScript事件类型中焦点、鼠标和滚轮事件详解

    这篇文章主要为大家详细介绍了JavaScript事件类型中焦点、鼠标和滚轮事件,以及注意事项,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • js实现验证码功能

    js实现验证码功能

    这篇文章主要为大家详细介绍了js实现验证码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • 小程序点餐界面添加购物车左右摆动动画

    小程序点餐界面添加购物车左右摆动动画

    这篇文章主要介绍了小程序点餐界面添加购物车左右摆动动画,当用户点击添加到购物车后会有一个左右摆动的购物车提示效果,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-09-09
  • uniapp使用高德地图的超详细步骤

    uniapp使用高德地图的超详细步骤

    使用uni-app框架开发微信小程序,可以使用高德地图开发地图选点、搜索位置、定位、获取详细的地址信息、码值等信息,下面这篇文章主要给大家介绍了关于uniapp使用高德地图的超详细步骤,需要的朋友可以参考下
    2022-12-12
  • 通过webpack引入第三方库的方法

    通过webpack引入第三方库的方法

    这篇文章主要介绍了通过webpack引入第三方库的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • js 覆盖和重载 函数

    js 覆盖和重载 函数

    学过JAVA的人对函数的覆盖和重载肯定是再熟悉不过了。
    2009-09-09

最新评论