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