bootstrap后台分页详解

本文转载至：https://blog.csdn.net/l_chiwin/article/details/77142297

最近在学bootStrap ，学的我头都大了，刚刚解决了个bootStrap的table的组件，就想来分享下，方便自己日后查阅，也看能不能让你们学的轻松点。。

首先贴上官网的自夸：

BootStrap Table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

不过倒也确实厉害，很好看！

接着贴出我弄的效果图：

是不是贼好看呢。。嘿嘿

接下来进入正题吧！！

注：本章只讲解 后台分页。

一、首先，你需要有bootStrap的环境：

[html] view plain copy

1. <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">  
2. <link href="lib/bootstrap_table/bootstrap-table.css" rel="stylesheet" type="text/css">  
3. <script src="lib/jquery-1.11.1.min.js" type="text/javascript"></script>  
4. <script src="lib/bootstrap/js/bootstrap.js"></script>  
5. <script src="lib/bootstrap_table/bootstrap-table.js"></script>  
6. <!-- 这个汉化包可选，但是必须在bootstrap-table.js后面哦 -->  
7. <script src="lib/bootstrap_table/bootstrap-table-zh-CN.js"></script>  

*哪里下载你们这么聪明我就不说啦，百度一下你就知道

二、在你的html的某处创建一个标签

[html] view plain copy

1. <!--id可变的！！-->  
2. <table id="table_server" ></table>  

*这里，为了好看，我加了面板

[html] view plain copy

1. <div class="panel panel-default">  
2. <div class="panel-body">  
3. <table id="table_server" ></table>  
4. </div>  
5. </div>  

三、写js！！

下面直接贴出我的js代码

[javascript] view plain copy

1. <script type="text/javascript">  
2. $(function () {  
3.   
4.     var t = $("#table_server").bootstrapTable({  
5.         url: 'http://localhost:8080/uc/getUserSplit',  
6.         method: 'get',  
7.         dataType: "json",  
8.         striped: true,//设置为 true 会有隔行变色效果  
9.         undefinedText: "空",//当数据为 undefined 时显示的字符  
10.         pagination: true, //分页  
11.         // paginationLoop:true,//设置为 true 启用分页条无限循环的功能。  
12.         showToggle: "true",//是否显示 切换试图（table/card）按钮  
13.         showColumns: "true",//是否显示 内容列下拉框  
14.         pageNumber: 1,//如果设置了分页，首页页码  
15.         // showPaginationSwitch:true,//是否显示 数据条数选择框  
16.         pageSize: 5,//如果设置了分页，页面数据条数  
17.         pageList: [5, 10, 20, 40],  //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。  
18.         paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<  
19.         paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>  
20.         // singleSelect: false,//设置True 将禁止多选  
21.         search: false, //显示搜索框  
22.         data_local: "zh-US",//表格汉化  
23.         sidePagination: "server", //服务端处理分页  
24.         queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的  
25.             return {//这里的params是table提供的  
26.                 cp: params.offset,//从数据库第几条记录开始  
27.                 ps: params.limit//找多少条  
28.             };  
29.         },  
30.         idField: "userId",//指定主键列  
31.         columns: [  
32.             {  
33.                 title: '#',//表的列名  
34.                 field: 'userId',//json数据中rows数组中的属性名  
35.                 align: 'center'//水平居中  
36.             },  
37.             {  
38.                 title: '账号',  
39.                 field: 'loginName',  
40.                 align: 'center'  
41.             },  
42.             {  
43.                 title: '真实姓名',  
44.                 field: 'realName',  
45.                 align: 'center'  
46.             },  
47.             {  
48.                 //EMAIL  
49.                 title: '邮箱',  
50.                 field: 'email',  
51.                 align: 'center'  
52.             },  
53.             {  
54.                 //部门名字  
55.                 title: '部门',  
56.                 field: 'dept.dname',//可以直接取到属性里面的属性，赞  
57.                 align: 'center'  
58.             },  
59.             {  
60.                 title: '状态',  
61.                 field: 'userStatus',  
62.                 align: 'center',  
63.                 formatter: function (value, row, index) {//自定义显示，这三个参数分别是：value该行的属性，row该行记录，index该行下标  
64.                     return row.userStatus == 0 ? "正常" : row.userStatus == 1 ? "请假" : "离职";  
65.                 }  
66.   
67.             },  
68.             {  
69.                 title: '操作',  
70.                 field: 'userId',  
71.                 align: 'center',  
72.                 formatter: function (value, row, index) {//自定义显示可以写标签哦~  
73.                     return '<a href="#" mce_href="#" onclick="edit(\'' + row.userId + '\')">操作</a> ';  
74.                 }  
75.             }  
76.   
77.         ]  
78.     });  
79.   
80.   
81.     t.on('load-success.bs.table', function (data) {//table加载成功后的监听函数  
82.         console.log("load success");  
83.         $(".pull-right").css("display", "block");  
84.     });  
85.   
86. });  
87. </script>  

*以上部分注释来自bootstrap-table官方文档：点击打开链接

[html] view plain copy

1.   

四、给出我的json数据格式：

[javascript] view plain copy

1. {  
2.     "page": 1,  
3.     "rows": [  
4.         {  
5.             "dept": {  
6.                 "deptDesc": "",  
7.                 "deptno": 10,  
8.                 "dname": "销售部"  
9.             },  
10.             "loginName": "lisi",  
11.             "loginPwd": "456",  
12.             "realName": "李四",  
13.             "userId": 3,  
14.             "userStatus": "0"  
15.         },  
16.         {  
17.             "dept": {  
18.                 "$ref": "$.rows[0].dept"  
19.             },  
20.             "loginName": "wangwu",  
21.             "loginPwd": "789",  
22.             "realName": "王五",  
23.             "userId": 4,  
24.             "userStatus": "0"  
25.         },  
26.         {  
27.             "dept": {  
28.                 "$ref": "$.rows[0].dept"  
29.             },  
30.             "loginName": "zhaoliu",  
31.             "loginPwd": "111",  
32.             "realName": "赵六",  
33.             "userId": 5,  
34.             "userStatus": "0"  
35.         },  
36.         {  
37.             "dept": {  
38.                 "deptno": 20,  
39.                 "dname": "华南区域"  
40.             },  
41.             "loginName": "fanqi",  
42.             "loginPwd": "222",  
43.             "realName": "范七",  
44.             "userId": 6,  
45.             "userStatus": "0"  
46.         },  
47.         {  
48.             "dept": {  
49.                 "$ref": "$.rows[3].dept"  
50.             },  
51.             "loginName": "maoba",  
52.             "loginPwd": "333",  
53.             "realName": "毛八",  
54.             "userId": 7,  
55.             "userStatus": "0"  
56.         }  
57.     ],  
58.     "total": 11  
59. }  

五、后台返回的数据的包装类

[java] view plain copy

1. public class TableSplitResult<T> implements Serializable{  
2.   
3.     private  Integer page;  
4.     private Integer total;  
5.     private T rows;  
6.   
7.   
8.     public TableSplitResult() {  
9.     }  
10.   
11.     public TableSplitResult(Integer page, Integer total, T rows) {  
12.         this.page = page;  
13.         this.total = total;  
14.         this.rows = rows;  
15.     }  
16.   
17.     public Integer getPage() {  
18.         return page;  
19.     }  
20.   
21.     public void setPage(Integer page) {  
22.         this.page = page;  
23.     }  
24.   
25.     public Integer getTotal() {  
26.         return total;  
27.     }  
28.   
29.     public void setTotal(Integer total) {  
30.         this.total = total;  
31.     }  
32.   
33.     public T getRows() {  
34.         return rows;  
35.     }  
36.   
37.     public void setRows(T rows) {  
38.         this.rows = rows;  
39.     }  
40. }  

六、问题以及总结

1.不知道大家有没有发现并且疑惑那个js代码底部那个方法里面的

[javascript] view plain copy

1. $(".pull-right").css("display", "block");