bootStrap table 使用

html:

<table id="listTable"
	class="table table-striped table-bordered table-hover text-center">
		<thead>
			<tr class="info">
			<th class="text-center" data-field="index" >序号</th>
			<th class="text-center" data-field="collegeName">院系</th>
			<th class="text-center" data-field="cataCount">专业</th>
			<th class="text-center" data-field="createDate">创建时间</th>
			<th class="text-center tdLine-nowrap"
				data-formatter="operateFormatter"
				data-events="operateEvents"><i
				class="fa fa-fw fa-cog txt-color-blue hidden-md hidden-sm hidden-xs"></i>
				操作</th>
			</tr>
		</thead>
</table>

js:

$(document).ready(function() {
	// 初始化列表
	initTable();
	
	//查询事件（初始化列表参数为空，查询时传入查询参数）
	$("#search").on("click", function(){
		$('#listTable').bootstrapTable('selectPage', 1);
	});
});

// 初始化列表
function initTable() {
	// 初始化列表
	var table = $('#listTable').bootstrapTable({
		url : getContextPath() + '/training/deplist',
		method : 'GET',
		striped: true,  //表格显示条纹
		pagination : true,//在表格底部显示分页工具栏
		sidePagination : 'server',//表格分页的位置(服务端)
		cache: false, //是否使用缓存，默认为true
		pageNumber: 1, //初始化加载第一页，默认第一页
		pageSize : 10, //每页显示记录条数
		pageList: [5, 10, 15, 20, 25],//记录数可选列表
		uniqueId : 'id',//每一行的唯一标识，一般为主键列
		undefinedText : '',
		queryParams : function(params) {//查询参数,每次调用是会带上这个参数，可自定义 
			params.collegeName = $("#depart").val();// 院系名称
			return params;
		},
		responseHandler : responseHandler,
		//在表体上渲染并在DOM中可用。
		onPostBody : function() {
			//resetView ： 重置引导表视图，例如重置表高度。
			$('#listTable').bootstrapTable("resetView");
			//操作按钮鼠标经过显示   popover:启用弹出框  trigger() 方法触发被选元素的指定事件类型。
			$("a").popover({
				trigger : 'hover'
			});
		}
	});
	
	//根据窗口调整表格高度 resize ： 当调整浏览器窗口的大小时，发生 resize 事件。
	// $(window)  Window 对象表示一个浏览器窗口或一个框架。
	$(window).resize(function() {
		$('#listTable').bootstrapTable('resetView');
	});

	// 操作事件
	window.operateEvents = {
		// 编辑
		'click .edit' : function(e, value, row, index) {
			getInfo(row.uscId,row.collegeName, "EDIT");
		},
		'click .delete' : function(e, value, row, index) {
			deleteConfig(row.uscId, "DELETE");
		}
	};
}
//设置列表数据
function responseHandler(res) {
	if ("success" == res.RET_CODE && res.rows != null) {
		$.each(res.rows, function(i, row) {
			row.index = res.pageIndex + i + 1;
		});
		return res;
	} else {
		return res;
		
	}
}


// 列表操作列格式化
function operateFormatter(value, row, index) {
	var content = '<a class="edit" '
				+ ' rel="popover-hover" data-placement="top" data-content="编辑" '
				+ ' href="javascript:void(0)"> ' + ' 编辑 ' + ' </a> '
				+ '<a class="delete" '
				+ ' rel="popover-hover" data-placement="top" data-content="删除" '
				+ ' href="javascript:void(0)"> ' + ' 删除 ' + ' </a> '
	return content;
}

后台：

bootstrap-table要求服务器返回的json须包含：totlal，rows