1.引入 layui 的配置文件
2.java代码
@RequestMapping("select") @ResponseBody public Map select(int page,@RequestParam("limit") int Size){ PageInfo<City> pi = cs.selectAll(page, Size); Map map = new HashMap<>(); map.put("code",0); //layui自定义响应码,为0时成功 map.put("msg",""); //额外的响应信息,没有可以不写 map.put("count",pi.getTotal()); //当前查询结果的总条数 map.put("data", pi.getList()); //存储表格中要展示的数据, return map; }
3.写jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<table id="demo" class="layui-icon"></table>
<script>
//第一个参数:引入需要使用的模块
//第二个参数:匿名函数,写我们要执行的layui的js代码
layui.use("table", function () { //定义一个变量,存储layer模块
var table = layui.table; table.render({ elem: "#demo", //表格id
//height:500, //表格高度
limit: 5, //默认值
limits: [1, 5, 10], //设置每页显示几条
url: "${pageContext.request.contextPath}/select.do", // 请求路径
page: true, //是否分页
cols: [[ //表格参数
{field: "id", title: "ID"}, {field: "code", title: "代码"}, {field: "name", title: "名称"}, {field: "provinceid", title: "上级"}, ]] }) }) </script>
</body>
</html>