使用layui的table.render 来渲染页面
js
table.render({
elem: '#member_data',//利用类或者id选择器找到元素
url:'/inf/venue/search/get',//接口地址
method: 'post',
id: 'table',//为重载等其他操作找到初始化的table控件
where: {searchValue: input.val()},//额外参数
contentType: 'application/x-www-form-urlencoded',
cols: [[
{type: 'numbers', title: '序号',minWidth: 50},//numbers 是前端自生成的递增的序号
{field:'hotelcode', title:'编号', width:120},//对应数据的字段名
{field:'bak04', title:'场地类型', width:180},
{field:'hotelname', title:'场地名称'},
{title:'操作', toolbar: '#barDemo', width:180}
]],
page: true//开启分页
});
html
<script type="text/html" >
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<table class="layui-hide" ></table>
监听修改和删除
table.on('tool(member_data)', function(obj){ //注：tool 是工具条事件名，member_data是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象
console.log(obj);
if(layEvent === 'del'){ //删除
$('.member_del_box').show()
} else if(layEvent === 'edit'){ //编辑 和模板中 lay-event="edit"的值相同
//do something
editAddAlertInit();
editSute(obj)
edit=true;
} else if(layEvent === 'LAYTABLE_TIPS'){
layer.alert('Hi，头部工具栏扩展的右侧图标。');
}
});
重载
table.reload('table', {//和render设置的id值一致 where: {searchValue: “额外参数”} })