一、首先,你需要有bootStrap的环境:
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">
<link href="lib/bootstrap_table/bootstrap-table.css" rel="stylesheet" type="text/css">
<script src="lib/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/bootstrap_table/bootstrap-table.js"></script>
<!-- 这个汉化包可选,但是必须在bootstrap-table.js后面哦 -->
<script src="lib/bootstrap_table/bootstrap-table-zh-CN.js"></script>
二、在你的html的某处创建一个标签
<!--id可变的!!-->
<table id="table_server" ></table>
*这里,为了好看,我加了面板
<div class="panel panel-default">
<div class="panel-body">
<table id="table_server" ></table>
</div>
</div>
三、写js!!
下面直接贴出我的js代码
<script type="text/javascript">
$(function () {
var t = $("#table_server").bootstrapTable({
url: 'http://localhost:8080/uc/getUserSplit',
method: 'get',
dataType: "json",
striped: true,//设置为 true 会有隔行变色效果
undefinedText: "空",//当数据为 undefined 时显示的字符
pagination: true, //分页
// paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
showToggle: "true",//是否显示 切换试图(table/card)按钮
showColumns: "true",//是否显示 内容列下拉框
pageNumber: 1,//如果设置了分页,首页页码
// showPaginationSwitch:true,//是否显示 数据条数选择框
pageSize: 5,//如果设置了分页,页面数据条数
pageList: [5, 10, 20, 40], //如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。
paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
// singleSelect: false,//设置True 将禁止多选
search: false, //显示搜索框
data_local: "zh-US",//表格汉化
sidePagination: "server", //服务端处理分页
queryParams: function (params) {//自定义参数,这里的参数是传给后台的,我这是是分页用的
return {//这里的params是table提供的
cp: params.offset,//从数据库第几条记录开始
ps: params.limit//找多少条
};
},
idField: "userId",//指定主键列
columns: [
{
title: '#',//表的列名
field: 'userId',//json数据中rows数组中的属性名
align: 'center'//水平居中
},
{
title: '账号',
field: 'loginName',
align: 'center'
},
{
title: '真实姓名',
field: 'realName',
align: 'center'
},
{
//EMAIL
title: '邮箱',
field: 'email',
align: 'center'
},
{
//部门名字
title: '部门',
field: 'dept.dname',//可以直接取到属性里面的属性,赞
align: 'center'
},
{
title: '状态',
field: 'userStatus',
align: 'center',
formatter: function (value, row, index) {//自定义显示,这三个参数分别是:value该行的属性,row该行记录,index该行下标
return row.userStatus == 0 ? "正常" : row.userStatus == 1 ? "请假" : "离职";
}
},
{
title: '操作',
field: 'userId',
align: 'center',
formatter: function (value, row, index) {//自定义显示可以写标签哦~
return '<a href="#" mce_href="#" onclick="edit(\'' + row.userId + '\')">操作</a> ';
}
}
]
});
t.on('load-success.bs.table', function (data) {//table加载成功后的监听函数
console.log("load success");
$(".pull-right").css("display", "block");
});
});
</script>
以上部分注释来自bootstrap-table官方文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
四、给出我的json数据格式:
{
"page": 1,
"rows": [
{
"dept": {
"deptDesc": "",
"deptno": 10,
"dname": "销售部"
},
"loginName": "lisi",
"loginPwd": "456",
"realName": "李四",
"userId": 3,
"userStatus": "0"
},
{
"dept": {
"$ref": "$.rows[0].dept"
},
"loginName": "wangwu",
"loginPwd": "789",
"realName": "王五",
"userId": 4,
"userStatus": "0"
},
{
"dept": {
"$ref": "$.rows[0].dept"
},
"loginName": "zhaoliu",
"loginPwd": "111",
"realName": "赵六",
"userId": 5,
"userStatus": "0"
},
{
"dept": {
"deptno": 20,
"dname": "华南区域"
},
"loginName": "fanqi",
"loginPwd": "222",
"realName": "范七",
"userId": 6,
"userStatus": "0"
},
{
"dept": {
"$ref": "$.rows[3].dept"
},
"loginName": "maoba",
"loginPwd": "333",
"realName": "毛八",
"userId": 7,
"userStatus": "0"
}
],
"total": 11
}
五、后台返回的数据的包装类
public class TableSplitResult<T> implements Serializable{
private Integer page;
private Integer total;
private T rows;
public TableSplitResult() {
}
public TableSplitResult(Integer page, Integer total, T rows) {
this.page = page;
this.total = total;
this.rows = rows;
}
public Integer getPage() {
return page;
}
public void setPage(Integer page) {
this.page = page;
}
public Integer getTotal() {
return total;
}
public void setTotal(Integer total) {
this.total = total;
}
public T getRows() {
return rows;
}
public void setRows(T rows) {
this.rows = rows;
}
}
六、问题以及总结
1.不知道大家有没有发现并且疑惑那个js代码底部那个方法里面的
$(".pull-right").css("display", "block");
因为我配置完成并显示数据的时候数据是分页了,但是分页条一直没显示不出来审查元素后发现它的display竟然等于none!
这我当然不能忍啦,在各种属性尝试加上百度谷歌折腾了三个小时后,依旧百撕不得骑姐,只好出此下下策,在表格load完成后多分页对display属性改成block。。。
虽说过程很颠簸,但是看着这么好看的分页,还是蛮爽的。。哈哈哈
2.如果大家知道上面那个问题怎么解决,一定要告诉我啊!!
3。大家记得后台返回数据的时候要带上page和total属性啊!!
4.希望看官们不要吝啬赞美与批评哟
注:
由于后台返回的 rows小于等于 ,前面js 设置的pageSize,它怎么也不会出现。