layui-入门

1.下载layui

2.导入layui

<title>开始使用layui</title>
  <!-- 导入js样式 -->
  <link rel="stylesheet" href="layui/css/layui.css">
  <!-- 导入layui脚本 -->
  <script src="layui/layui.js"></script>

 3.写入表单

<table id="demo" lay-filter="test"></table>

 4.引入表格模块

layui.use(\'table\', function(){
	  var table = layui.table;
	  //第一个实例
	  table.render({
	    elem: \'#demo\'
	    ,height: 312
	    ,url: \'findAll\' //数据接口
	    
	    ,page: true //开启分页
	    ,cols: [[ //表头
	      {field: \'id\', title: \'ID\', width:80, sort: true, fixed: \'left\'}
	      ,{field: \'username\', title: \'用户名\', width:80}
	      ,{field: \'password\', title: \'用户密码\', width:120, sort: true}
	      
	    ]]
	  });
	  
	});
	</script>
5.后台传入数据规范

@ResponseBody
	public Map<String,Object> lookUser(HttpSession session) {
		//data数据
		List<User> list=userService.findAll();
        //传给layui的map数据
		Map<String,Object> map=new HashMap<String,Object>();	  
		//状态码code
		map.put("code",0);
		map.put("msg","" );
		map.put("count", list.size());
		map.put("data",list);
		return map;
	}