1.html界面定义表格
<form class="layui-form" id="b" action="">
<div class="layui-inline">
<label class="layui-form-label">角色名称:</label>
<div class="layui-input-block">
<input type="text" name="name" id="name" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">是否禁用:</label>
<div class="layui-input-block">
<select name="delete_flag" lay-filter="aihao">
<option value="0" selected="">启用</option>
<option value="1">禁用</option>
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-block">
<button type="reset" class="layui-btn layui-btn-primary face-btn" style="height:35px;">重置</button>
<button class="layui-btn face-btn" id="queryRole" type="button" style="height:35px;">搜索</button>
</div>
</div>
</form>
<div class="wsp-table" >
// 表格
<table id="demo" lay-filter="test"></table>
// 序号
<script type="text/html" id="indexTplRole">
{{d.LAY_TABLE_INDEX+1}}
</script>
// 操作
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</div>
2.给表格渲染值
layui.use(['table','form'], function(){
var table = layui.table;
var form = layui.form;
var tableIns=table.render({
id:"id",
elem: '#demo'
,method: 'post'
,contentType: 'application/json'
,url: service+'/WyRoleInformations/paging' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field:'indexTplxh', title: '序号',width:100,templet:'#indexTplRole',type:'numbers'}
,{field: 'name', title: '角色名称', width:150}
,{field: 'desc', title: '角色描述', width:256}
,{field: 'count', title: '人数', width:100, sort: true}
,{field: 'createdAt', title: '创建时间', width:150,templet:function(d){return createTime(d.createdAt)}}
,{field: 'deleteFlag', title: '启用/禁用', width:150, templet:function(d){if(d.deleteFlag == 0){return "启用"}else{
return "禁用"
}} }
, {
fixed: 'right',
title: '操作',
toolbar: '#barDemo',
width: 150
}
]],
text:{
none:"暂无数据"
}
});
$('#queryRole').on('click', function(){
debugger
tableIns.reload({
page:{
curr:1
},
where:{
name: $("input[name='name']").val(),
deleteFlag: $("select[name='delete_flag']").val()
}
})
});
});