使用bootstrap-table形成表格

1、控制器：
设置的返回类型为map，返回的数据格式为：

	@RequestMapping("/List.do")
	@ResponseBody
	public Map<String, Object> showList(){
	......
	Map<String, Object> map = new HashMap();		
		map.put("total", total);//数据总数
		map.put("rows", listHandOnTime);//得到的数据集合
	return map;
	}

2、jsp：
引入css和js

<link href="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/bootstrap-table.css" >
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script  src="${pageContext.request.contextPath}/js/bootstrap-table.js"></script>
<script  src="${pageContext.request.contextPath}/js/bootstrap-table-zh-CN.min.js"></script>
//表格可以自由拉伸，多表头问题：表头和表体对不齐，无解，除了删除高度，不是我想要的
<script src="${pageContext.request.contextPath}/js/colResizable-1.6.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-table-resizable.js"></script>

<button onclick="query()">查询</button>
<table id="table" class="table text-nowrap table-striped table-hover">				 																				
</table> 
<script type="text/javascript">
$(function () {
    selects();
    //1.初始化Table
     var oTable = new TableInit();
    oTable.Init();      
});
</script>

<script type="text/javascript">
var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#table').bootstrapTable({
        //关键部分已打（*）
            url: 'xxx/List.do',        //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: true,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            resizable: true,					//可以拖动的宽度
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize:10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: false,
            showColumns: false,                  //是否显示内容下拉框
            showRefresh: false,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 600,                        //行高，如果没有设置height属性，表格自动根据记录条数自觉调整表格高度
            uniqueId: "mcno",                     //每一行的唯一标识，一般为主键列
            showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            showColumns: false,
            columns: [				
				[{
					title: '',
					field: '',
					align: 'center',
					valign: 'middle',
					colspan: 1,
					rowspan: 1
				},{
					title: '',
					field: '',
					align: 'center',
					valign: 'middle',
					colspan: 1,
					rowspan: 1
				},{
					title: 'xxx',
					field: '',
					align: 'center',
					valign: 'middle',
					colspan: 3,
					rowspan: 1
				}, {
					title: 'xxx',
					field: '',
					align: 'center',
					valign: 'middle',
					colspan: 2,
					rowsapn: 1
				}, {
					title: '准时完成',
					field: '',
					align: 'center',
					valign: 'middle',
					colspan: 3,
					rowsapn: 1
				}, {
					title: '超期模具',
					field: '',
					align: 'center',
					valign: 'middle',
					colspan: 3,
					rowsapn: 1
				}],
				[{
						field: 'mcno', //列ID要和控制器传过来的字段名相同 
						title: 'xx',						
						align: 'center',
						valign: 'middle'						
					}, {
						field: 'companyid',//列ID同时也是指定要显示的数据的ID 
			            title: 'xx',   											
						align: 'center',						
						valign: 'middle'
					}, {
						field: 'xx', //列ID同时也是指定要显示的数据的ID   
						title: 'xx',		
						align: 'center',
						valign: 'middle'						
					}, {
						field: 'xx', //列ID同时也是指定要显示的数据的ID   
						title: 'xx',						
						align: 'center',
						valign: 'middle'						
					}, {
						field: 'tots', //列ID同时也是指定要显示的数据的ID   
						title: '合计',						
						align: 'center',
						valign: 'middle'						
					}, {
						field: 'xx', //列ID同时也是指定要显示的数据的ID   
						title: 'xx',						
						align: 'center',
						valign: 'middle'					
					},
					{
						field: 'xx', //列ID同时也是指定要显示的数据的ID   
						title: 'xx',						
						align: 'center',
						valign: 'middle'						
					},
					{
						field: 'xx', //列ID同时也是指定要显示的数据的ID   
						title: 'xx',					
						align: 'center',
						valign: 'middle'						
					},
					{
						field: 'xx', //列ID同时也是指定要显示的数据的ID   
						title: 'xx',
						
						align: 'center',
						valign: 'middle'						
					},
					{
					field: 'xx', //列ID同时也是指定要显示的数据的ID   
						title: 'xx',					
						align: 'center',
						valign: 'middle'					
					},
					{
					field: 'xx', //列ID同时也是指定要显示的数据的ID   
						title: 'xx',						
						align: 'center',
						valign: 'middle'					
					},
					{
						field: 'xx', //列ID同时也是指定要显示的数据的ID   
						title: 'xx',
						
						align: 'center',
						valign: 'middle'					
					},
					{
					field: 'xx', //列ID同时也是指定要显示的数据的ID   
						title: 'xx',
						align: 'center',
						valign: 'middle'						
					}
				]
			]

        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
    	 var ps = $("#table").bootstrapTable("getOptions").pageSize;
         var pn = $("#table").bootstrapTable("getOptions").pageNumber;

         if(typeof(ps) == "undefined"){
             ps = params.pageSize;
         }

         if(typeof(pn) == "undefined"){
             pn = params.pageNumber;
         }
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
        pageSize: ps,   //每页多少条数据
        pageNow: pn,  //页码          
        prdtdate:$("#prdtdate").val(),
		deldate:$("#deldate").val(),
		companyid:$("#companyid").val(),		
		cv2:$("#cv2").val()	
        };
        return temp;
    };
    return oTableInit;
};

function query(){
	 $('#table').bootstrapTable('refresh',TableInit);	
}
};  
function shutDown() { //关闭
	window.parent.tabsClose();
}
</script>