1. First, you need a bootStrap environment:
<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>
2. Create a tag somewhere in your html
<!--id可变的!!-->
<table id="table_server" ></table>
*Here, for the sake of appearance, I added a panel
<div class="panel panel-default">
<div class="panel-body">
<table id="table_server" ></table>
</div>
</div>
Third, write js! !
Paste my js code directly below
<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>
The above comments are from the official documentation of bootstrap-table: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
Fourth, give my json data format:
{
"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
}
Five, the packaging class of the data returned by the background
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;
}
}
6. Questions and
summary
$(".pull-right").css("display", "block");
Because when I configured and displayed the data, the data was paginated, but the paging bar was never displayed. After reviewing the element, I found that its display was equal to none!
Of course I can't bear this. After trying various attributes and Baidu and Google for three hours, I still can't tear it apart, so I have to make a last resort. After the table load is completed, change the display attribute to block in multiple pages. . .
Although the process is very bumpy, it is quite refreshing to see such a beautiful pagination. . Hahaha
2. If you know how to solve the above problem, be sure to tell me! !
3. Everyone remember to bring page and total attributes when returning data in the background! !
4. I hope the officials will not be stingy with praise and criticism.
Note
: Since the rows returned in the background are less than or equal to the pageSize set by the previous js, it will never appear.