使用思路：

1、需要写一个table标签，到时候用js来渲染
2、按照layui的使用规则写js（官网直接复制示例改一改）
3、请求后台，获取数据并且按照数据格式，把数据给到layui，这是最关键的

示例：做一个常用的查询表格

目标如图:
做一个带搜索框的表格，点击搜索可以按照输入的参数进行搜索，搜索后的将结果可以渲染到表格上

实施：
1、 写一个table标签，一个输入框，一个搜索按钮

搜索ID：
搜索

2、按照layui的使用规则写js用于渲染表格（官网直接复制示例改一改），再写给 搜索按钮添加点击事件，点击事件要把文本框的参数传进去

layui.use('table', function(){var table = layui.table;//表格渲染---------------------------------------------------------------------var tableIns = table.render({elem: '#test',url: 'muban1Action/queryTplInst.do',cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增,cols: [[{field:'id', width:80, title: 'ID', sort: true},{field:'tplId', width:80, title: '模板ID'},{field:'page', width:80, title: '所属页面', sort: true},{field:'bkid', width:80, title: '背景图id'},{field:'writer', title: '文案', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增,{field:'city', title: '所属市', sort: true},{field:'province', title: '所属省', sort: true},{field:'createTime', title: '创建时间'},{field:'expire', width:137, title: '模板到期日', sort: true},{field:'usrId', width:137, title: '用户id', sort: true}]]});//搜索按钮的点击事件------------------------------------------------------$("#sousuo").click(function () {//这里以搜索为例tableIns.reload({where: { //设定异步数据接口的额外参数，任意设id: $("#demoReload").val()//传送搜索条件，取文本框的值,usrId: 0},page: {curr: 1 //重新从第 1 页开始}});});});

3、请求后台，获取数据并且按照数据格式，把数据给到layui，这是最关键的
下面是控制层的代码，这里使用的是springMVC。如下仅仅展示控制层，dao层和sql这里不过多赘述

@Controller
@RequestMapping("muban1Action")
public class Muban1Action {@Resourceprivate TplInstBiz tplInstBiz;@RequestMapping("queryTplInst")@ResponseBodypublic  Map queryTplInst(Integer id,Integer usrId ,Integer TplId,HttpServletRequest request, HttpServletResponse response) throws IOException {TplInst tplInst = new TplInst();tplInst.setUsrId(usrId);tplInst.setId(id);//把参数给到实体类tplInst.setTplId(TplId);List list=  tplInstBiz.queryTplInst(tplInst);//查询出结果Map map=new HashMap();map.put("msg","ok");map.put("code",0);map.put("count",list.size());map.put("data",list);return map;}
}

我们返回的需要按照这个格式返回，layui会拿这个解析

        Map map=new HashMap();map.put("msg","ok");map.put("code",0);map.put("count",list.size());map.put("data",list);return map;

4、渲染前端页面
这里的field的字段名只要和list中的对象的属性对应就可以把结果渲染出来了

5、结果展示
输入参数前查询：

输入参数后查询，根据ID查询出一条数据