这里说明下我的版本时2.3bootstrap 版本之间有很大区别的。所以建议引入css 别出错。
话不多说 上代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap-table.css">
<script type="text/javascript" src="static/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap-table.js"></script>
<script type="text/javascript" src="static/js/bootstrap-table-zh-CN.js"></script>
<title>主要部分</title>
</head>
<script type="text/javascript">
$(function(){
$('#tableList').bootstrapTable({
url: 'body/getDate', //请求后台的URL(*)
method: 'post', //请求方式(*)
striped: true, //是否显示行间隔色
pagination: true,//是否分页
pageSize: 20,//单页记录数
pageList: [5, 10, 20, 50],//分页步进值
sidePagination: "server",//服务端分页
queryParams:queryParams,
columns: [{
field: 'NO',
title: 'NO',
valign:"middle",
align:"center",
formatter: function (value, row, index) {
return index+1;
}
}, {
field: 'name',
title: '文件名字',
}, {
field: 'type',
title: '类型',
},{
field: 'sise',
title: '大小',
},{
field: 'date',
title: '修改时间',
},{
field: '',
title: '操作',
formatter: function (value, row, index) {
return '<a class="btn" href="#"><i class="icon-arrow-down"></i>下载</a> <a class="btn" href="#"><i class="icon-remove"></i>删除</a>';
}
}]
});
function queryParams(params) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit, //页面大小
page: params.offset, //页码
};
return temp;
}
});
</script>
<body>
<div class="row-fluid">
<div class="span12" align="left" style="padding: 10px;"><button type="button" class="btn btn-success">上传文件</button></div>
</div>
<div class="row-fluid">
<div class="span12" style="padding: 5px;"><table id="tableList" class="table table-striped"></table></div>
</div>
</body>
</html>
版本区别 我目前使用的看 主要是布局 现在最高版本用的不是span 所以看清版本很重要。
后端代码:
@RequestMapping("getDate")
@ResponseBody
public Map<String, Object> getDate(@RequestBody Map map12){
List<Map<String, Object>> list=new ArrayList<Map<String, Object>>();
//得到分页数据
Integer limit=(Integer)map12.get("limit");
Integer offset=(Integer)map12.get("page");
for(int i=0;i<20;i++){
Map<String, Object> map=new HashMap<String, Object>();
map.put("name", "会议1");
map.put("type", "pdf");
map.put("date", "2017-09-09");
map.put("size", "10M");
list.add(map);
}
Map<String, Object> map1=new HashMap<String, Object>();
map1.put("total", "20");
map1.put("rows", list);
return map1;
}
这里讲述下几个重要的地方:
生成table 我估计都能做到,但是这个分页可能会麻烦点。
分页有两种 这个服务端分页跟客户端分页。大多是使用服务端分页
上面那个 queryParams:表示传参。每次点击分页按钮都会传参到后台 这个参数的形式是:
{"limit":"20","page":"0","order":"asc"}
这种形式传过去的 所以用 springmvc接受比较 有几种方式:上图就是一种 然后就是可以放在bean中接收。
第二点注意的是:
传送到页面的数据 就是:
[json]必须包含:total节点(总记录数),rows节点(分页后数据)
即:{“total”:24,”rows”:[…]}
然后最终效果:
请高手指点。这有什么问题或者实现不了都可留言。我会回复的。