记录关于Bootstrap Table的一些实用配置。
html
引入相关文件
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- bootstrap-table -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
页面内容
<!-- 查询工具栏 -->
<div class="form-inline">
<div class="form-group">
<label for="queryNameText">姓名：</label>
<input id="queryNameText" class="form-control input-sm">
</div>
<div class="form-group">
<label for="queryAgeText">年龄：</label>
<input id="queryAgeText" class="form-control input-sm">
</div>
<button class="btn btn-primary btn-sm" id="queryBtn">查询</button>
<button class="btn btn-primary btn-sm" id="resetBtn">重置</button>
<button class="btn btn-primary btn-sm" id="addBtn">新增</button>
</div>
<hr>
<table id="testTable"></table>
使用js方式加载table
官方文档上提供了详尽的配置参数，以下记录几个比较常用的
url
后端数据交互url，要求返回json数据，且包含rows（查询内容）和total（数据总数）
queryParams
数据加载参数，必须要有offset和limit参数，支持通过json格式自定义查询参数
例，自定义name和age作为查询参数：
queryParams: function (params) {
return {
offset: params.offset,
limit: params.limit,
name: $('#queryNameText').val(),
age: $('#queryAgeText').val()
}
}
striped
当值为true显示行间隔条纹效果
pagination
当值为true显示分页条
sidePagination
可选值为'server'、'client'，分别表示服务端分页和客户端分页
pageSize
每页数量，默认值10
pageList
值为一个数组，提供每页可选数量的选择
rowStyle
对行样式的设置，对应函数的两个参数为row, index
例：
rowStyle: function (row, index) {
var strClass = '';
if (row.age < 18) {
strClass = 'text-danger';
}
return {classes: strClass}
}
columns
表格列配置项，常用的有
| 列配置项 | 描述 |
|---|---|
| field | json数据的列 |
| title | 列标题 |
| titleTooltip | 列标题提示 |
| class | 该列样式（class） |
| align | 对齐方式（left、right、center） |
例：
columns: [{
field: 'id',
title: '编号',
titleTooltip: '编号提示',
class: 'text-danger',
align: 'center',
}]
还有一个非常有用的列配置项：formatter，可以在表格中写html，使表格内容不限于文本内容，对应函数的三个参数为value, row, index
例：
columns: [{
formatter: function (value, row, index) {
return [
'<a href="javascript:modifyPer(' + row.id + ",'" + row.name + "'," + row.age + ",'" + row.address + "'" + ')">' +
'<i class="glyphicon glyphicon-pencil"></i>修改' +
'</a>',
'<a href="javascript:delPer(' + row.id + ')">' +
'<i class="glyphicon glyphicon-remove"></i>删除' +
'</a>'
].join('');
},
title: '操作'
}]
效果如图：
本例中使用的配置
var $testTable = $('#testTable');
$testTable.bootstrapTable({
url: '/getPers',
queryParams: function (params) {
return {
offset: params.offset,
limit: params.limit,
name: $('#queryNameText').val(),
age: $('#queryAgeText').val()
}
},
columns: [{
field: 'id',
title: '编号'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'address',
title: '地址'
}, {
formatter: function (value, row, index) {
return [
'<a href="javascript:modifyPer(' + row.id + ",'" + row.name + "'," + row.age + ",'" + row.address + "'" + ')">' +
'<i class="glyphicon glyphicon-pencil"></i>修改' +
'</a>',
'<a href="javascript:delPer(' + row.id + ')">' +
'<i class="glyphicon glyphicon-remove"></i>删除' +
'</a>'
].join('');
},
title: '操作'
}],
striped: true,
pagination: true,
sidePagination: 'server',
pageSize: 10,
pageList: [5, 10, 25, 50, 100],
rowStyle: function (row, index) {
var ageClass = '';
if (row.age < 18) {
ageClass = 'text-danger';
}
return {classes: ageClass}
},
});
与分页插件pagehelper结合使用
服务端分页要求返回的json数据必须包含rows（查询内容）和total（数据总数）两项内容，点击页码按钮会向后端传递offset和limit参数，使用PageHelper.offsetPage(offset, limit);方法可以简单快速地进行分页。
分页内容工具类
/**
* 用于返回分页结果
*/
public class PaginationResult {
private long total;
private List<?> rows;
public PaginationResult(long total, List<?> rows) {
this.total = total;
this.rows = rows;
}
public long getTotal() {
return total;
}
public void setTotal(long total) {
this.total = total;
}
public List<?> getRows() {
return rows;
}
public void setRows(List<?> rows) {
this.rows = rows;
}
@Override
public String toString() {
return "PaginationResult{" +
"total=" + total +
", rows=" + rows +
'}';
}
}
返回数据
仅在web层接收offset和limit参数就可以完美分页，使得对项目的侵入性非常小
@RequestMapping("/getPers")
public @ResponseBody
PaginationResult getPers(int offset, int limit, String name, String age) {
Page<Object> page = PageHelper.offsetPage(offset, limit);
List<Per> pers = perService.getPers(name, age);
return new PaginationResult(page.getTotal(), pers);
}
效果样例
http://106.14.200.121/bstabletest/
效果样例
注意事项
对表格数据进行增删查改后想立即看到效果通常会使用
$('#table').bootstrapTable('refresh');
进行刷新操作，以下列举了测试中出现的两种问题（都是由服务端分页的offset参数引起的问题），并提出解决方案（建议每次增删查改后都采用这两种方案）。
条件查询
服务端分页时bootstrap table根据分页条所在的位置传递offset参数，若从第二页开始查询，而所查询数据的总数量少于每页显示数量，就会出现显示查询数量为0的结果。
删除操作
在第一页后的页面，若只有一行数据，点击删除，刷新后分页条消失，显示没有数据。
解决方案
1.每次查询操作后先销毁bootstrap table，再用js启动
function initTable() {
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
url : ...
...
});
}
2.在每次提交操作后返回首页
$('#table').bootstrapTable('selectPage', 1);
完整项目下载
一个结合Spring Boot进行单页面增删查改的小例子：Bootstrap-Table-test
有Spring基础的可以快速入门：Soring Boot学习笔记
