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

最新推荐文章于 2023-09-20 14:51:01 发布

weixin_34192816

最新推荐文章于 2023-09-20 14:51:01 发布

阅读量226

点赞数

文章标签： java javascript json ViewUI

原文链接：https://my.oschina.net/960823/blog/883288

版权

为什么80%的码农都做不了架构师？>>>

这里说明下我的版本时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 我估计都能做到，但是这个分页可能会麻烦点。