bootstrap table demo

js code

//search
	function searchTable(){
		var searchInfo = $("#searchForm").serializeJsonObject();
    	initTable(searchInfo);
    }
	
	//initialize the form
	function initTable (visitor) {
		//Clear the values ​​in the ID array when initializing the table
		hmdId = [];
		hmdIdResult = [];
		$('#exampleTableEvents').bootstrapTable('destroy');
		$('#exampleTableEvents').bootstrapTable({
	        url: serverPath+"/hmdList/init", // Load address of server data
			method : 'post', // submit method
			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", // The data encoding type sent to the server
			sidePagination : "server",//Pagination mode: client client paging, server server paging (*)
			trimOnSearch : false,//Allow empty character search
			pagination : true,//Whether to enable the bottom display of pagination
			search : false,//Whether the search box is enabled
			showRefresh : false,//Whether to display the refresh button.
			showToggle : false,//Whether to display the toggle view (table/card) button.
			showColumns : false,//Whether to display the content column drop-down box.
			pageSize : 100,//If paging is set, the number of page data
			pageNumber : 1,//If paging is set, the page number of the first page
			pageList : [],//Number of entries per page
			toolbar : $("#tableTool"), // set the toolbar
			toolbarAlign : 'left', // toolbar position
			height : 430, // height of the table
			undefinedText: '-', // The character to display when the data is undefined.
			striped: true, // interlace color change
			iconsPrefix:'glyphicon', // font library
			cache:false, // ajax cache is set to false to disable AJAX data caching
			clickToSelect:true, // Setting true will automatically select the rediobox and checkbox when the row is clicked.
			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 : 'select all',
				field : 'check',
				checkbox : true
			}, {
				title : 'name',
				field : 'name',
				align : 'center'
			}, {
				title : 'undefinedText',
				field : 'sss',
				align : 'center'
			},{
				title : 'gender',
				field : 'gender',
				align : 'center'
			}, {
				title : 'age',
				field : 'age',
				align : 'center'
			}, {
				title : 'ethnicity',
				field : 'nation',
				align : 'center'
			}, {
				title : 'document type',
				field : 'id_cardType',
				align : 'center'
			}, {
				title : 'document number',
				field : 'id_card',
				align : 'center'
			}, {
				title : 'Contact information',
				field : 'phone',
				align : 'center'
			}, {
				title : 'entry time',
				field : 'input_time',
				align : 'center',
				
			}, {
				title : 'detailed',
				field : 'id',
				align : 'center',
				formatter : function(value, row, index) {
					//value: the value of the current field
					//row: the data of the current row
					//The content displayed by the column can be customized through the 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);
						}
					}
				}
			}
		});
	};