客户就是上帝，你大爷的！
jsp代码：数据与springMvc交互
<!DOCTYPE>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="/WEB-INF/tlds/im.tld" prefix="im" %>
<%@ page isELIgnored="false"%>
<%
String rootPath = request.getContextPath();
%><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<title>BootStrap Table使用</title>
<link href="<%=rootPath%>/pages/artifiForm/bootstrap.min.css" rel="stylesheet" />
<link href="<%=rootPath%>/pages/artifiForm/bootstrap-table.css" rel="stylesheet" />
<script type="text/javascript" src="<%=rootPath%>/pages/artifiForm/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="<%=rootPath%>/pages/artifiForm/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=rootPath%>/pages/artifiForm/bootstrap-table.js"></script>
<script type="text/javascript" src="<%=rootPath%>/pages/artifiForm/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
var rootPath = "<%=rootPath%>";
var baseURL = rootPath +"/pages/artifiForm/";
var url = baseURL+"getBootstrap.json";
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#list_data').bootstrapTable({
url: url,
method: 'get', //请求方式（*）
sortName: "flowid", //排序列
singleSelect: true, //仅允许单选
escape: true, //过滤危险字符
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
pageIndex: 1, //起始页
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
checkbox: true
}, {
field: 'name',
title: '模板名称'
}, {
field: 'flowid',
title: '流程ID'
}, {
field: 'flowname',
title: '流程名称'
}, {
field: 'url',
title: '模板URL'
},{
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){
var e = '<a href="#" mce_href="#" οnclick="edit(\''+ row.id + '\')">编辑</a> ';
var d = '<a href="#" mce_href="#" οnclick="del(\''+ row.id +'\')">删除</a> ';
return e+d;
}}, ]
});
};
oTableInit.queryParams = function (params) {
var temp = {
rows: params.limit,
page: params.pageNumber,
search:params.search,
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//初始化页面上面的按钮事件
};
return oInit;
};
</script>
</head>
<body>
<div class="panel-body" style="padding-bottom:0px;">
<div class="panel panel-default">
<div class="panel-heading">查询条件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:15px">
<label class="control-label col-sm-1" for="txt_search_departmentname">模板名称</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_departmentname">
</div>
<label class="control-label col-sm-1" for="txt_search_statu">状态</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_statu">
</div>
<div class="col-sm-4" style="text-align:left;">
<button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
</div>
</div>
</form>
</div>
</div>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<table id="list_data"></table>
</div>
</body>
</html>
java测试代码：
/**
* bootStrap测试
*/
@RequestMapping(value = "getBootstrap.json")
public PageView getBootstrap(HttpServletRequest request,HttpServletResponse response) {
IMap params = new IMap(request);
int pageSize = Integer.valueOf(params.getString("rows").equals("")?"1":params.getString("rows"));
int pageNow = Integer.valueOf(params.getString("page").equals("")?"10":params.getString("page"));
PageView pageView = new PageView(pageSize, pageNow);
pageView = pimArtifiDefineFormSrv.getAtrifiFormList(pageView, params);
return pageView;
}
注意：有的版本的bootstrap-table或min.js要改源码，就看后台数据是要什么了，我们要的是limit和pageNumber不要params.offset，但有的js没有
只能改源码
如下加入了
params.pageNumber=this.options.pageNumber;；
if (this.options.queryParamsType === 'limit') {
params = {
search: params.searchText,
sort: params.sortName,
order: params.sortOrder
};
if (this.options.pagination) {
params.offset = this.options.pageSize === this.options.formatAllRows() ?
0 : this.options.pageSize * (this.options.pageNumber - 1);
params.limit = this.options.pageSize === this.options.formatAllRows() ?
this.options.totalRows : this.options.pageSize;
params.pageNumber=this.options.pageNumber;
}
}
