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

2017-04-21 09:54:09来源:oschina作者:橙子hhh人点击

这里说明下我的版本时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+"/";
%>







<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>
主要部分

<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 '下载  删除';
}
}]
});
function queryParams(params) {
var temp = {//这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit,//页面大小
page: params.offset, //页码
};
return temp;
}
});
</script>










版本区别 我目前使用的看 主要是布局 现在最高版本用的不是span 所以看清版本很重要。


后端代码:


@RequestMapping("getDate")
@ResponseBody
public Map getDate(@RequestBody Map map12){
List>list=new ArrayList>();
//得到分页数据
Integer limit=(Integer)map12.get("limit");
Integer offset=(Integer)map12.get("page");

for(int i=0;i<20;i++){
Map map=new HashMap();
map.put("name", "会议1");
map.put("type", "pdf");
map.put("date", "2017-09-09");
map.put("size", "10M");
list.add(map);
}
Map map1=new HashMap();
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”:[…]}


然后最终效果:



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


微信扫一扫

第七城市微信公众平台