您的位置：首页 > Web前端 > BootStrap

简述bootstrap 之间版本的区别。以及结合springmvc 生成table 分页，传参

2017-04-20 00:00 831 查看

这里说明下我的版本时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”:[…]}

然后最终效果：

请高手指点。这有什么问题或者实现不了都可留言。我会回复的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： java springmvc Bootstrap

相关文章推荐

新的分享

章节导航