layuiServlet
package com.hp.controller;
import com.alibaba.fastjson.JSON;
import com.hp.bean.Student;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@WebServlet(name = "LayuiServlet",urlPatterns = "/LayuiServlet")
public class LayuiServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
/*super.service(req, resp);*/
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
List<Student> students=new ArrayList<>();
Student s1=new Student();
s1.setId(001);
s1.setName("唐僧");
s1.setAge(50);
students.add(s1);
Student s2=new Student();
s2.setId(002);
s2.setName("孙悟空");
s2.setAge(50);
students.add(s2);
Student s3=new Student();
s3.setId(003);
s3.setName("猪八戒");
s3.setAge(50);
students.add(s3);
//去自己创建一个layui后台的json格式
Map map=new HashMap<>();
map.put("code",0);//默认必须是0不然不显示
map.put("msg","啥都行");
map.put("count",3);
map.put("data",students);
//在页面上输出
String s= JSON.toJSONString(map);
PrintWriter writer= resp.getWriter();
writer.println(s);
writer.close();
}
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/layui-v2.5.6/layui/layui.js"></script>
<link rel="stylesheet" href="/layui-v2.5.6/layui/css/layui.css">
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</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>
<script>
layui.use(['layer','form','table'],function(args){
var layer=layui.layer;
var form=layui.form;
var table=layui.table;
//table.render是渲染上面的table表格
table.render({
elem:"#test"
,url:'/LayuiServlet'
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '用户数据表'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'序号', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'name', title:'姓名', width:120, edit: 'text'}
,{field:'age', title:'年龄', width:120, edit: 'text'}
]]
,page: true
});
})
</script>
</body>
</html>结果
??