layui表格加查询

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