Bootstrap-table实现查询、分页、导出、参数设置及前后端代码示例详解
官方文档可以参考：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E4%BA%8B%E4%BB%B6
页面效果图：
- 要控制左侧的复选框按钮属性设置：
checkbox: false,- 控制内容下拉列中是否显示的属性设置：
visible: false- 后端代码要返回查询符合条件的总条数
- 表格中的数据导出要引入如下文件：
<script src="/public/plugin/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js">script>
<script src="/public/plugin/bootstrap-table/tableExport.js">script>属性设置：
//显示导出插件
showExport: true,
//文件名称设置
exportOptions:{
fileName: document.title
}首先帖出来前端页面代码：
<html>
<head>
<meta charset="UTF-8">
<title>消息处理中心title>
<link rel="stylesheet" href="/public/plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/public/plugin/bootstrap-table/dist/bootstrap-table.css">
<script src="/public/js/jquery-2.1.1.min.js">script>
<script src="/public/plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js">script>
<script src="/public/plugin/bootstrap-table/dist/bootstrap-table.js">script>
<script src="/public/plugin/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js">script>
<script src="/public/plugin/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js">script>
head>
<body>
<div class="container">
<div class="row">
<div id="toolbar">div>
<table id="bootstrapTable" >table>
div>
div>
body>
<script type="text/javascript">
$(function(){
initTable();
});
function initTable() {
//先销毁表格
$("#bootstrapTable").bootstrapTable({
//表格高度
height: getHeight(),
//服务器数据的请求方式 'get' 或 'post'。
method: 'get',
//设置为 true 会有隔行变色效果
striped: true,
//设置为 true 会在表格底部显示分页条。
pagination: true,
//请求后台的URL
url: '/MsgDealCenterAction/listData',
//服务器返回的数据类型。
dataType: 'json',
//工具按钮用哪个容器
toolbar: '#toolbar',
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性
cache: false,
//设置为 true 启用分页条无限循环的功能
// paginationLoop: true,
//设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置服务器数据地址（url）或者重写ajax方法
sidePagination: 'server',
//初始化加载第一页，默认第一页
pageNumber: 1,
//每页的记录行数
pageSize: 10,
//可供选择的每页的行数
pageList: [10,15,20, 50, 100],
//设置为false 将禁止所有列的排序。
sortable: true,
//设置默认排序为 name
sortName: 'insert_time',
//定义排序方式，'asc' 或者 'desc'。
sortOrder: "desc",
//是否显示刷新按钮
showRefresh: true,
//是否显示内容列下拉框。
showColumns: true,
//显示导出插件
showExport: true,
//是否显示右上角的搜索框
search: false,
//是否显示切换视图（table/card）按钮。
showToggle:false,
//是否启用点击选中行
// clickToSelect: true,
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
//设置为limit可以获取limit, offset, search, sort, order
queryParamsType:'undefined',
//请求服务器数据
queryParams: function queryParams(params){
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
sortName: params.sortName,
sortOrder: params.sortOrder
};
return param;
},
//加载成功时执行
onLoadSuccess: function(data){
console.log("加载成功");
},
//加载失败时执行
onLoadError: function(status){
console.log("加载数据失败"+status);
},
columns: [
{
title: "全选",
field: "select",
checkbox: false,
width: 20,//宽度
align: "left",//水平
valign: "middle",
formatter: function (value, row, index) {
return row._id;
}
},{
title: '编号',//标题 可不加
align: 'center',
valign: 'middle',
sortable: false,
formatter: function (value, row, index) {
return index+1;
}
},{
field: 'source',
title: '产品线',
align: 'center',
valign: 'middle',
sortable: false,
width: '80px'
},{
field: 'msg_type',
title: '消息类型',
align: 'center',
valign: 'middle',
sortable: false
},{
field: 'account_name',
title: '账号类型',
align: 'center',
valign: 'middle',
sortable: false
},{
field: 'msg_name',
title: '消息名称',
align: 'left',
valign: 'middle',
sortable: false
},{
field: 'msg',
title: '消息内容',
align: 'left',
valign: 'middle',
sortable: false,
visible: false,
//value【字段值】row【row对应的整条记录】index【行索引】
formatter: function format(value,row,index){
console.log(typeof(value))
// 缩进一个2个空格
return JSON.stringify(value, null, 2);
}
},{
field: 'msg_start_time',
title: '起始有效时间',
align: 'center',
valign: 'middle',
sortable: true
},{
field: 'msg_end_time',
title: '结束有效时间',
align: 'center',
valign: 'middle',
sortable: true
},{
field: 'insert_time',
title: '入库时间',
align: 'center',
valign: 'middle',
sortable: true
},{
field: 'update_time',
title: '更新时间',
align: 'center',
valign: 'middle',
sortable: true,
visible: false
}]
});
}
//获取table的高度
function getHeight() {
return $(window).height() - 100;
}
script>
html>下面是后端的代码：
public static void listData(Integer pageNumber,Integer pageSize,String sortName,String sortOrder, Integer source, Integer msg_type, String account_name) {
DBCollection collection = MongoUtil.getGGUserCollection("gg_deal_msg_center");
BasicDBObject query = new BasicDBObject();
//产品线
if(ObjectUtils.isNotNull(source)) {
query.append("source", source);
}
//消息类型
if(ObjectUtils.isNotNull(msg_type)) {
query.append("msg_type", msg_type);
}
if(StringUtils.isNotBlank(account_name)) {
List<Long> accountIds = getAccountIdByName(account_name);
query.append("account_id", new BasicDBObject("$in", accountIds));
}
//数据总条数
long count = collection.count(query);
BasicDBObject orderBy = new BasicDBObject(sortName, SortEnum.fromSortValue(sortOrder));
DBCursor cursor = collection.find(query).limit(pageSize).skip((pageNumber - 1) * pageSize).sort(orderBy);
List<Map<String, Object>> list = GGDBCursor.find(cursor);
if(ObjectUtils.isNotNull(list)) {
Set<Long> accountIds = Sets.newHashSet();
for(Map<String, Object> map:list) {
Long accountId = NumberUtils.createLong(map.get("account_id").toString());
if(!Arrays.asList(0L, 1L,2L).contains(accountId)) {
accountIds.add(accountId);
}
}
Map<Long, String> accounts = obtainAccounts(accountIds);
for(Map<String, Object> map:list) {
//账号或者推送类型
Long accountId = NumberUtils.createLong(map.get("account_id").toString());
//产品线
Integer productLine = NumberUtils.createInteger(map.get("source").toString());
//消息类型
Integer msgType = NumberUtils.createInteger(map.get("msg_type").toString());
if(Arrays.asList(-1L, 0L, 1L,2L).contains(accountId)) {
accountIds.add(accountId);
}
if(Arrays.asList(-1L,1L,2L,3L).contains(accountId)) {
map.put("account_name", MsgUserTypeEnum.fromMsgUserName(accountId));
} else {
map.put("account_name", accounts.get(accountId));
}
map.put("source", ProductEnum.fromProductName(productLine));
map.put("msg_type", MsgTypeEnum.fromMsgName(msgType));
}
}
JSONObject json = new JSONObject();
json.put("rows", list);
json.put("total", count);
System.out.println(json.toJSONString());
renderJSON(json);
}