bootstrapTable 表格制定

HTML

检索代码块

<div>
	<input id="roomId" type="text" class="form-control" placeholder="根据房间号检索..."/>
	<button onclick="search_reload()">查询</button>
</div>

表格代码块

<div class="ibox">
	<div class="ibox-body" style="border:1px solid #e8e8e8;margin-top:10px;padding:0 20px">
		<table id="exampleTable" data-mobile-reponsive="true"></table>
	</div>
</div>

js

//初进入获取列表接口，显示数据
$(function(){
	load();
})
function load(){
	$('#exampleTable').bootstrapTable({
		method : 'get',    // 服务器数据的请求方式 get or post
		url : prefix + "/list", // 服务器数据的加载地址
		iconSize : 'outline',
		toolbar : '#exampleToolbar',  //工具按钮用哪个容器
		striped : true, // 设置为true会有隔行变色效果
		cache: false,  //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性
		dataType : "json", // 服务器返回的数据类型
		pagination : true, // 设置为true会在底部显示分页条
		singleSelect : false, // 设置为true将禁止多选
		pageSize : 10, // 如果设置了分页，每页数据条数
		pageNumber : 1, // 如果设置了分布，首页页码
		showColumns : false, // 是否显示内容下拉框（选择显示的列）
		sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
		queryParamsType : "",
		// 设置为limit则会发送符合RESTFull格式的参数
		queryParams : function(params) {
			return {
				// 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
			     pageNumber : params.pageNumber,
                 pageSize : params.pageSize,
			};
		},
		// showToggle: true,  //是否显示详细视图和列表视图的切换按钮
		// uniqueId: "ID",    //每一行的唯一标识，一般为主键列
		// clickToSelect: true,   //是否启用点击选中行
		// showRefresh : true,   //是否显示刷新按钮
		// showToggle : true,
		// showColumns : true,  //是否显示所有的列（选择显示的列）
		// sortable: true, //是否启用排序
		// sortOrder: "asc", //排序方式
		// search : false, // 是否显示搜索框
		// pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
		// 请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
		// queryParamsType = 'limit' ,返回参数必须包含
		// limit, offset, search, sort, order 否则, 需要包含:
		// pageSize, pageNumber, searchText, sortName,
		// sortOrder.
		// 返回false将会终止请求
		responseHandler : function(res){
            return {
                "total": res.data.total,//总数
                "rows": res.data.records   //数据
             };
        },
		columns : [{
				field : 'id', 
				title : '编号' 
			},{
				field : 'name', 
				title : '姓名' 
			},{
				field : 'roomId', 
				title : '房间号' 
			},{
				field : 'startAt', 
				title : '入住时间' 
			},{
				field : 'endAt', 
				title : '退房时间' 
			},{
				field : 'createAt', 
				title : '创建时间'
			},{
				field : 'pid', 
				title : '人像留证' ,
			},{
				title : '操作',
				field : 'id',
				align : 'center',
				formatter : function(value, row, index) {
					var e = '<a class="btn btn-primary btn-sm s_edit_h" href="#" mce_href="#" title="编辑" οnclick="edit(\''
							+ row.id
							+ '\')"><i class="fa fa-edit"></i></a> ';
					var d = '<a class="btn btn-primary btn-sm s_edit_h" href="#" mce_href="#" title="删除" οnclick="del(\''
							+ row.id
							+ '\')"><i class="fa fa-edit"></i></a> ';
					return e ;
				}
			}]
	})
}


//点击检索
function search_reload(){
	let val = $('#roomId').val();
	if(val == ''){
		layer.msg('请输入查询条件...');
		return;
	}
	let ref = {
		query:{
			roomId:$(‘#roomId’).val();
		}
	}
	$('#exampleTable').bootstrapTable('refresh',ref);
}

//编辑的方法
function edit(id){
	layer.open({
		type : 2,
		title : "编辑信息",
		maxmin : true,
		shadeClose : fasle,   //点击遮罩层是否关闭弹框
		area :['700px','500px'],
		content : ''+id 
	})
}

//删除的方法
function del(id){
	layer.config('确定要删除该条数据吗？',{
		btn : ['确定','取消']
	},function(){
		$.ajax({
			url:'',
			type:'',
			data:{},
			success:function(resp){
				layer.msg()
			}
		})
	})
}