bootstrap-table 简单应用

1.客户端分页

<table id="contentTable" class="table table-striped table-bordered table-condensed">
	
</table>
<script src="bootstrap-3.3.7/js/jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="bootstrap-table/bootstrap-table.js"></script>
<script src="bootstrap-table/bootstrap-table-zh-CN.js"></script>
<link rel="stylesheet" href="bootstrap-table/bootstrap-table.css">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<script>
	//初始化table
	function createTable(datas){
			$('#contentTable').bootstrapTable({
				method: 'get',
				cache: false,
				height: 500,
				striped: true,
				pagination: true,
				pageSize: 10,
				pageNumber:1,
				pageList: [10, 20, 50, 100, 200, 500],  sidePagination:'client',
				search: true,
				showColumns: true,
				showRefresh: false,
				showExport: true,
				exportTypes: ['csv','txt','xml'],
				search: true,
				clickToSelect: true,
				columns: 
				[
					{field:"id",title:"编号",align:"left",valign:"middle",sortable:"true"},
					{field:"name",title:"名字",align:"left",valign:"middle",sortable:"true"},
					{formatter:"operateFormatter",title:"操作",align:"center",valign:"middle",sortable:"true",events: window.operateEvents}
				],
				data:datas
			});			
			
		}
	
	//自定义内容
	function operateFormatter(value, row, index){
		return "<a>删除</a>"
	}

	var arr=[];
	for(var i=0;i<100;i++){
		arr[i]={"id":"ID"+i,"name":"name"+i};
	}

	createTable(arr);
</script>

 2.服务端分页

服务端返回数据格式

{
    "total":100,
    "rows":[
            {"id":1,"name":"a"},
            {"id":2,"name":"b"}
           ]
}

页面配置

<table id="table" data-toggle="table" data-url="jsonurl"
			data-pagination="true" data-side-pagination="server"
			data-page-list="[10, 25, 50, 100, ALL]" data-height="608"
			data-query-params="queryParams">
			<thead>
				<tr>
					<th data-field="id">编号</th>
					<th data-field="name">名字</th>
					<th data-formatter="operateFormatter"
						data-events="window.operateEvents">操作</th>
				</tr>
			</thead>
		</table>

data-query-params 对应数据接口所需要的参数，如下

function queryParams(params) {
		return {
			//每页多少条数据
			limit : params.limit,
			//请求第几页
			offset : params.offset
		}
	}