bootstrap table demo

js 代码

//搜索
	function searchTable(){
		var searchInfo = $("#searchForm").serializeJsonObject();
    	initTable(searchInfo);
    }

	//初始化表格
	function initTable (visitor) {
		//初始化表格时清掉ID数组里的值
		hmdId = [];
		hmdIdResult = [];
		$('#exampleTableEvents').bootstrapTable('destroy');
		$('#exampleTableEvents').bootstrapTable({
	        url: serverPath+"/hmdList/init", // 服务器数据的加载地址
			method : 'post', // 提交方式
			queryParams : function(params) {
				if(visitor == null){
					return {
						pageSize : params.limit,
						pageNumber : params.offset
					};
				}else{
					visitor["pageNumber"] = params.offset;
					visitor["pageSize"] = params.limit;
					return visitor;
				}
			},
			contentType : "application/x-www-form-urlencoded;charset=UTF-8", // 发送到服务器的数据编码类型
			sidePagination : "server",//分页方式：client客户端分页，server服务端分页（*）
			trimOnSearch : false,//允许空字符搜索
			pagination : true,//是否开启分页 底部显示
			search : false,//是否启用搜索框
			showRefresh : false,//是否显示刷新按钮。
			showToggle : false,//是否显示切换视图（table/card）按钮。
			showColumns : false,//是否显示内容列下拉框。
			pageSize : 100,//如果设置了分页，页面数据条数
			pageNumber : 1,//如果设置了分页，首页页码
			pageList : [],//每页条数
			toolbar : $("#tableTool"), // 设置工具栏
			toolbarAlign : 'left', // 工具栏位置
			height : 430, // 表格的高度
			undefinedText: '-', // 当数据为 undefined 时显示的字符。
			striped: true, // 隔行变色
			iconsPrefix:'glyphicon', // 字体库
			cache:false, // ajax缓存  设置为 false 禁用 AJAX 数据缓存
			clickToSelect:true, // 设置 true 将在点击行时，自动选择 rediobox 和 checkbox。
			maintainSelected:true,
			rowStyle : function rowStyle(row, index){
			    return {
			    	css: {"padding-top":"0px!important","padding-bottom":"0px!important","font-size":"14px"}
			    	}; },
			onLoadSuccess : function(data) {
			},
			onLoadError : function(data) {
			},
			columns : [ {
				title : '全选',
				field : 'check',
				checkbox : true
			}, {
				title : '姓名',
				field : 'name',
				align : 'center'
			}, {
				title : 'undefinedText',
				field : 'sss',
				align : 'center'
			},{
				title : '性别',
				field : 'gender',
				align : 'center'
			}, {
				title : '年龄',
				field : 'age',
				align : 'center'
			}, {
				title : '民族',
				field : 'nation',
				align : 'center'
			}, {
				title : '证件类型',
				field : 'id_cardType',
				align : 'center'
			}, {
				title : '证件号码',
				field : 'id_card',
				align : 'center'
			}, {
				title : '联系方式',
				field : 'phone',
				align : 'center'
			}, {
				title : '录入时间',
				field : 'input_time',
				align : 'center',

			}, {
				title : '详细',
				field : 'id',
				align : 'center',
				formatter : function(value, row, index) {
					//value：当前field的值
					//row：当前行的数据
					//通过formatter可以自定义列显示的内容
					var a = '<span  class = "toWhite" onclick = "showDetail('+row.id+')">查看</span>  ';
					var b = '<span  class = "toWhite" \
						onclick = "readyToEdit('+row.id+')">编辑</span>';
					return a+b;
				}
			} ],
			onCheck : function(row) {
				hmdId.push(row.id);

			},
			onUncheck : function(row) {
				for (var i = 0; i < hmdId.length; i++) {
					if (hmdId[i] == row.id) {
						hmdId.splice(i, 1);
					}
				}
			},
			onCheckAll:function(rows){
				$("#exampleTableEvents>tbody>tr").addClass("selected");
				for (var j = 0; j < rows.length; j++) {
					hmdId.push(rows[j].id);
				}
			},
			onUncheckAll:function(rows){
				$("#exampleTableEvents>tbody>tr").removeClass("selected");
				for (var j = 0; j < rows.length; j++) {
					for (var i = 0; i < hmdId.length; i++) {
						if (hmdId[i] == rows[j].id) {
							hmdId.splice(i, 1);
						}
					}
				}
			}
		});
	};