bootstrap-table (jquery 插件)

使用前提

页面引入bootstrap-table.js

              bootstrap-table.min.css

html页面

<div style="">
	<table id="tradeList" >
</table>

inittableing=function(tableData){	
	$('#tradeList').bootstrapTable({
	    url: ContextPath + urls.getPlatoonList,         //请求后台的URL（*）
	    method: 'post',                      //请求方式（*）
	    toolbar: '#toolbar',                //工具按钮用哪个容器
	    toolbarAlign:'center',
	    contentType:"application/x-www-form-urlencoded; charset=UTF-8",//这个一定要写，要不然后台接不到传递的参数
	    striped: true,                        //是否显示行间隔色                  
	    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	    pagination: true,                   //是否显示分页（*）
//	    paginationPreText:'<',
//	    paginationNextText:'>',
	    sortable: true,                     //是否启用排序
	    sortOrder: "asc",                   //排序方式
	    queryParams: queryParams,//传递参数（*）
	    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
	    pageNumber:1,                       //初始化加载第一页，默认第一页
	    pageSize: 10,                       //每页的记录行数（*）
	    pageList: [10, 20, 50, 100],        //可供选择的每页的行数（*）
//	    strictSearch: true,					//设置为 true启用 全匹配搜索，否则为模糊搜索
//	    clickToSelect: true,                //是否启用点击选中行
//	    height: 460,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
	    uniqueId: "platoonCode",                     //每一行的唯一标识，一般为主键列
	    cardView: false,                    //是否显示详细视图
	    detailView: false,                   //是否显示父子表
//	    showPaginationSwitch:true,
	    columns: [
	    	[{
	        field: 'platoonCode',
	        title: '隊列番号',
	        align: 'center',
	        valign: 'middle',
	        rowspan: 2,
	        sortable: true // 开启排序功能
		    }, {
		        field: 'platoonName',
		        title: '隊列名前',
		        align: 'center',
		        valign: 'middle',
		        rowspan: 2
		    }, {
		        field: 'vehicleCount',
		        title: '車数',
		        align: 'center',
		        valign: 'middle',
		        rowspan: 2
		    }, {
		        field: 'startTime',
		        title: '出発時間',
		        valign: 'middle',
		        align: 'center',
		        rowspan: 2,
		        sortable: true // 开启排序功能
		    }, {
		        field: 'startPoi',
		        title: '出発地',
		        valign: 'middle',
		        align: 'center',
		        rowspan: 2
		    }, {
		        field: 'endPoi',
		        title: '目的地',
		        valign: 'middle',
		        align: 'center',
		        rowspan: 2
		    },  {
		        field: 'driver',
		        title: 'ドライバー',
		        valign: 'middle',
		        align: 'center',
		        rowspan: 2,
		        formatter:function (driver){		        	
		        	return 'ID：'+driver.driverCode
		        			+'名前：'+driver.driverName
		        			+'スーギル：'+driver.driverSkill;
		        }
		    },  {
		        field: 'distance',
		        title: '走行距離',
		        valign: 'middle',
		        align: 'center',
		        colspan: 2		        
		    }, {
		        field: 'time',
		        title: '走行時間',
		        valign: 'middle',
		        colspan: 2,
		        align: 'center',
		    },{
		        field: 'status',
		        title: '隊列状態',
		        valign: 'middle',
		        align: 'center',
		        rowspan: 2,
		        formatter:function (status){
		        	if(status!=9){
		        		return '走行中';
		        	}
		        	else {
		        		return '走行完了';
		        	}		        	
		        }
		    }, {
		        field: 'dangerAct',
		        title: '危険運転',
		        valign: 'middle',
		        align: 'center',
		        rowspan: 2,
		        formatter:function (dangerAct){		        	
		        	return '急加速：'+dangerAct.acc+'回'
		        			+'急速：'+dangerAct.dec+'回'
		        			+'急ハンドル：'+dangerAct.handle+'回';
		        }
		    },{
		        field: 'warnCount',
		        title: '警告総計',
		        valign: 'middle',
		        align: 'center',
		        rowspan: 2,
		        formatter:function (warnCount){		        	
		        	return 'H：'+warnCount.high+'回'
		        			+'M：'+warnCount.middle+'回'
		        			+'L：'+warnCount.low+'回';
		        }
		    }
		    ,{
		        field: 'platoonCode',
		        title: '',
		        valign: 'middle',
		        align: 'center',
		        rowspan: 2,		       
		        formatter:function (code){		        	
		        	return '<input type="button" οnclick=godetail('+code+') value="详细"></input>'
		        }
		    }],
		    [{
		    	field: 'distance',
		        title: '実績',
		        valign: 'middle',
		        align: 'center',		        	
		    },
		    {
		    	field: 'time',
		        title: '計画',
		        valign: 'middle'
		    },
		    {
		    	field: 'totalDistance',
		        title: '実績',
		        align: 'center',
		        valign: 'middle'
		        	
		    },
		    {
		    	field: 'totalTime',
		        title: '計画',
		        valign: 'middle',
		        align: 'center'
		    }
		    ]

	    ],
	    responseHandler: function(res) {
            return {
                "total": res.count,//总页数
                "rows": res.list   //数据
             };
        },
	    
	});
	
	$(".fixed-table-body").width(1300);
	$(".fixed-table-body").height(300);

	$(".fixed-table-pagination").width(1300);
}

参数

function queryParams(params) {
    var param = {       
//			platoonCode : "",
//			vehicleCode : "",
			statusList : '1,2,9',
//			startDate : "",
//			endDate : "",
			p : this.pageNumber,
			s : this.pageSize
    }
    return param;
} 

效果

说实话，刚开始用的的时候，坑还是很多的。

更多功能请参考官方文档：

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

如有问题也可以评论问我，拜了个拜！^_^