bootstrap paginator分页前后台用法示例

<!--路径根据自己项目修改--><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>

$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;}