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

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

然后最终效果:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券