【bootstrap】bootstrap-table的使用

引入文件:

<script src="js/bootstrap-table.js"></script>
<link href="css/bootstrap-table.css" rel="stylesheet" />
<script src="js/bootstrap-table-zh-CN.js"></script>

<script type="text/javascript">
	$("#coupons").bootstrapTable({
		url:'<%=request.getContextPath()%>/pages/couponLists.do',
		dataType:'json',
		method:'get',
		width:'100%',
		dataField: "data",
		undefinedText:'数据未加载',//当数据为 undefined 时显示的字符
		pagination:true,//启动分页
		paginationLoop:true,
		pageNumber: 1,
		pageSize:1,
		pageList:[ 1, 2, 3, 4 ],
		striped: true,
		sidePagination: "client",	//分页方式：client客户端分页，server服务端分页（*）
		showColumns: true,  //显示下拉框勾选要显示的列
	    showRefresh: true,  //显示刷新按钮
	    showToggle:true,//显示一行是否改成竖着
	    showPaginationSwitch:true,//是否显示 下面的分页框
	    search: true, //显示搜索框
	    detailView:true,
	    minimumCountColumns: 2,
	    toolbal:'#toolbar',
	    detailFormatter:function(index, row){
	    	return JSON.stringify(row);
	    },
	    columns: [
	    	{
	    		checkbox:true
	    	},
	    	{
	    		field:'num',
	    		title:'序号',
	    		align:'center',
	    		formatter: function(value,row,index){
	            	return index+1;
	            }
	    	},
	    	{
	    		field: 'couponName',
	            title: '优惠券名称',
	            align: 'center',
	    	},
	    	{
	    		field: 'couponFixedPrice',
	            title: '优惠券价格',
	            align: 'center',
	    	},
	    	{
	    		field: 'couponOriginPrice',
	            title: '市场原价',
	            align: 'center',
	    	},
	    	{
	    		field: 'status',
	            title: '状态',
	            align: 'center',
	    	},
	    	{
	    		field:'play',
	    		title:'操作',
	    		align: 'center',
	    		width:'200px',
	    		formatter:function(value,row,index){  
	                var e = '<a class="btn btn-warning btn-xs" onclick="edit(\''+ index + '\')">'+
	                 '<i class="glyphicon glyphicon-pencil"></i>  详情/编辑</a>';
	                var d = '<a  style="margin-left:5px;" class="btn btn-info btn-xs" onclick="view(\''+ index + '\')">'+
	                 '<i class="glyphicon glyphicon-list-alt"></i>  删除 (失效)</a>';  
	                return e+d; 
	            }
	    	}
	    ]
	});
</script>

<table id="coupons" class="table table-hover"></table>