bootstrap table下载:https://github.com/wenzhixin/bootstrap-table/archive/master.zip
bootstrap table文档:https://bootstrap-table-docs3.wenzhixin.net.cn/zh-cn/documentation/
- 引用包:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
- 加入一个表格
<table id="ArbetTable"></table>
- 初始化
$(function() {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
});
function DoOnMsoNumberFormat(cell, row, col) {
var result = "";
if (row > 0 && col == 0)
result = "\\@";
return result;
}
var TableInit = function() {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function() {
$('#ArbetTable').bootstrapTable({
url: './goodSType/getGoodTypes', //请求后台的URL(*)
method: 'get', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
paginationShowPageGo: true, //是否启用跳转到指定页
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
/* queryParams: oTableInit.queryParams, //传递参数(*) */
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 5, //每页的记录行数(*)
pageList: "[10, 25, 50, 100, All]", //可供选择的每页的行数(*)
/* search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 */
contentType: "application/x-www-form-urlencoded",
/* strictSearch: true, */
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: false, //是否启用点击选中行
//height: 700, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "no", //每一行的唯一标识,一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
showExport: true, //是否显示导出按钮
buttonsAlign:"right", //按钮位置
exportTypes:['excel','png','pdf'], //导出文件类型
Icons:'glyphicon-export',
exportOptions:{
ignoreColumn: [0,"operate"], //忽略某一列的索引
fileName: '货物类别表', //文件名称设置
worksheetName: 'sheet1', //表格工作区名称
tableName: '货物类别表',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
onMsoNumberFormat: DoOnMsoNumberFormat
},columns: [{
title : "",
align : "center",
valign : "middle",
checkbox : true,
width:50,
clickToSelect : true
}, {
field: 'id',
title: 'ID',
sortable: true,
}, {
field: 'typename',
title: '类别名称'
}, {
field: 'gtyperemarks',
title: '类别内容'
},
{
field: 'operate',
title: '操作',
formatter: operateFormatter //自定义方法,添加操作按钮
},
],
rowStyle: function(row, index) {
var classesArr = ['success', 'info'];
var strclass = "";
if(index % 2 === 0) { //偶数行
strclass = classesArr[0];
} else { //奇数行
strclass = classesArr[1];
}
return {
classes: strclass
};
}, //隔行变色
});
};
/* //得到查询的参数
oTableInit.queryParams = function(params) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset + 1
};
return temp;
}; */
return oTableInit;
};
function operateFormatter(value, row, index) { //赋予的参数
return [
'<a class="btn active disabled" href="#">编辑</a>',
'<a class="btn active" href="#">档案</a>',
'<a class="btn btn-default" href="#">记录</a>',
'<a class="btn active" href="#">准入</a>'
].join('');
}
- 后台
@RequestMapping(value="/getGoodTypes",method=RequestMethod.GET)
@ResponseBody
public Map<String, Object> getGoodTypes(
@RequestParam(value="pageSize",required=false,defaultValue="5")int pageSize,
@RequestParam(value="pageNumber",required=false,defaultValue="1")int pageNumber,
String sortName, String sortOrder) {
PageHelper.startPage(pageNumber, pageSize); //分页
List<TGoodstype> list = goodSTypeServer.queryAllGoodType();
PageInfo<TGoodstype> pageInfo = new PageInfo<>(list);
List<TGoodstype> rows = pageInfo.getList();
int total = (int) pageInfo.getTotal();
Map<String, Object> results = new HashMap<>();
results.put("rows", rows); // "rows"为前端bootstrap table默认接收字段名,后端名称修改要和前端responseHandler()函数一致
results.put("total", total); // "total"为前端bootstrap table默认接收字段名,后端名称修改要和前端responseHandler()函数一致
return results;
}