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>