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);
						}
					}
				}
			}
		});
	};