Bootstrap Table作为一款基于Bootstrap的插件，支持自定义参数与后台交互，提供强大的分页功能，能够快速方便的展示数据。
官方文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#表格参数
页面
引用文件
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<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>
<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>
相对于普通bootstrap项目需要引入bootstrap table的css和js以及中文包
html
较为方便的一种方式是全部使用js进行table的构建
html页面部分只需要相应的带id的table标签
<table id="productTable"></table>
完整html
<div id="page-wrapper">
<div class="col-md-6 col-md-offset-3 col-xs-12">
<!-- 头部图片和搜索框 -->
<div id="topSearch">
<div id="search">
<span class="input-group">
<input type="text" id="searchText" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="searchBtn">
<strong>搜地猫</strong>
</button>
</span>
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="resetBtn">
<strong>重置</strong>
</button>
</span>
</span>
</div>
</div>
<!-- 商品展示列表 -->
<div>
<table id="productTable">
<caption><span>点击商品加入购物车</span></caption>
</table>
</div>
</div>
</div> <!-- page-wrapper -->
js
相对基本的配置
$('#productTable').bootstrapTable({
url : 'getProducts', // 请求数据
striped : true, // 隔行着色
pagination : true, // 分页
queryParams : queryParams, // 传递参数
sidePagination : "server", // 分页方式，服务端分页
pageNumber : 1, // 加载首页
pageSize : 10, // 每页的记录行数
pageList : [10, 25, 50, 100], // 可供选择的分页
showColumns : true, // 显示列按钮
showRefresh : true, // 刷新按钮
minimumCountColumns : 1, // 最少允许的列数
showToggle : true, // 详细视图和列表视图切换按钮
columns : [ { // 列
field : 'productId',
title : '编号'
}, {
field : 'productName',
title : '名称'
}, {
field : 'doublePrice',
title : '单价'
} ],
onClickRow : clickRow // 单击表格行事件
});
// 向后台传递的参数
function queryParams(params) {
return {
offset : params.offset, // 分页偏移量
limit : params.limit, // 每页数量
search : $('#searchText').val() // 搜索关键字
}
}
queryParams对应的function传递的参数可以自定义
分页功能需要的参数是offset和 limit，分别代表查询偏移量和查询记录数，传入后台使用SQL语句的limit进行查询
后端
后端使用SpringMVC+MyBatis返回json数据
需要jackson包
不用maven需要以下依赖
jackson依赖
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.7.4</version>
</dependency>
返回的json数据中必须要包含total(总数)和rows(数据)
service层
/**
* 查询商品目录
* 对于boostrap-table，返回的json必须包含total(总数)和rows(数据)
*
* @param offset 偏移量
* @param limit 每页数量
* @param search 搜索关键字
* @return
*/
@Override
public Map<String, Object> queryProduct(int offset, int limit, String search) {
Map<String, Object> map = new HashMap<>();
// 业务逻辑处理
map.put("total", total);
map.put("rows", products);
return map;
}
web层
@RequestMapping("/getProducts")
@ResponseBody
public Map<String, Object> getProducts(int offset, int limit, String search) {
return productService.queryProduct(offset, limit, search);
}
效果展示
使用bootstrap table进行数据展示
完整项目下载
https://github.com/wch853/dmall
