spring bootstrap table 表格创建
前台表格插件多种样，以前用过datatable以及gridtable，这次想要尝试一个新的，就选择了bootstrap table，主要是界面定了想要用bootstrap设计界面，所以就选择了这个，bootstrap table 官网为http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/，里面对表格各种问题都有详细描述。好了，不多说了，下面来详细说明bootstrap table编写的步骤。
1、引入文件
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link href="../css/bootstrap-table.css" rel="stylesheet">
<script src="../js/jquery.min.js">script>
<script src="../js/bootstrap.min.js">script>
<script src="../js/bootstrap-table.js">script>
<script src="../js/bootstrap-table-locale-all.js">script>从网上下载这些文件，然后放到指定文件夹下面
2、bootstrap table js 为了以后方便应用，我把js提取出来放到单独js里面，然后传参，只要传过去的参数符合要求，就可以在界面上展示改表格。
/**
* bootstrap分页方法
*/
var TableInitSearch = function() {
var oTableInit = new Object();
//oTableInit.bootstrapTable('destroy');
// 初始化Table
oTableInit.Init = function(id, url,columns,searchArgs) {
//---先销毁表格 ---
$(id).bootstrapTable('destroy');
$(id).bootstrapTable({
url : url, // 请求后台的URL（*）
method: 'post',
contentType: "application/x-www-form-urlencoded",
//【查询设置】
/* queryParamsType的默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber */
queryParamsType:'',
striped : false, // 是否显示行间隔色
cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
toolbar : '#toolbar', // 工具按钮用哪个容器
queryParams: function queryParams(params) {
var param = {
pageNumber: params.pageNumber, //后台接收的时候为pageNumber
pageSize: params.pageSize //后台接收的时候为pageSize
};
for(var key in searchArgs){
param[key]=searchArgs[key]//此处查询时向后台传递的参数
}
return param;
},
//【其它设置】
locale:'zh-CN',//中文支持
pagination: true,//是否开启分页（*）
sortOrder : "asc", // 排序方式
pageNumber:1,//初始化加载第一页，默认第一页
pageSize: 10,//每页的记录行数（*）
pageList: [ 10, 25, 50, 100 ], // 可供选择的每页的行数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
search : false, // 是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch : true,
minimumCountColumns : 2, // 最少允许的列数
clickToSelect : true, // 是否启用点击选中行
showRefresh:false,//刷新按钮
//【样式设置】
height: 500,//table的高度
cardView : false, // 是否显示详细视图
detailView : false, // 是否显示父子表
columns : columns,
});
};
return oTableInit;
};
从上图可以看出需要传递三个参数，id ，传到后台的url，以及column。
3、jsp界面
<table id="table">table><script>
var id = "#table";
var url = "${pageContext.request.contextPath}/user/userlist";
var columns = [
{
field : 'id',
title : '用户编号',
align : 'center',
valign : 'middle'
},
{
field : 'name',
title : '姓名',
align : 'center',
valign : 'middle'
},
{
field : 'age',
title : '年龄',
align : 'center',
valign : 'middle'
}];
//1.初始化Table
var oTable = new TableInitSearch();
var searchArgs = {
id:null,
name:null
}
//界面初始化
$(function() {
oTable.Init(id, url, columns, searchArgs);
});
function toSearch() {
var name= $("input[name='name']").val();//获得input框输入的name值
var id= $("input[name='id']").val();//获得input框输入的id值
searchArgs = {
id: id,
name: name
}
oTable.Init(id, url, columns, searchArgs);
}
script>4、后台 conctroller
@RequestMapping("/userlist")
@ResponseBody
//ajax调用
public Map<String, Object> getUsers(Integer pageSize,
Integer pageNumber,String name,String id) {
Map<String, Object> result = new HashMap<String, Object>();
List<User> userlist = ........//此处为后台调用获取用户的方法
result.put("total", total);//获取列表总数量
result.put("rows", userlist);/获取用户数list
}果然是不写不知道，一写就真的了解别人真的不是没写，有些东西真的是下意识的忽略。