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"><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>
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
   
   

<!--jsp页面只需一个 ul 给定 class 和 id--><ul class="pagination"  id="page"></ul>
   
   

    
    
1
    
    
2
   
   

 

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

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
    
    
8
    
    
9
    
    
10
    
    
11
    
    
12
    
    
13
    
    
14
    
    
15
    
    
16
    
    
17
    
    
18
    
    
19
    
    
20
    
    
21
    
    
22
    
    
23
    
    
24
    
    
25
    
    
26
    
    
27
    
    
28
    
    
29
    
    
30
    
    
31
    
    
32
    
    
33
    
    
34
    
    
35
    
    
36
    
    
37
    
    
38
    
    
39
   
   

 

后台操作

   

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

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

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
    
    
8
    
    
9
    
    
10
    
    
11
    
    
12
    
    
13
    
    
14