layui表格使用实例
1、编写jsp页面
-
编写jsp页面
<%-- Created by IntelliJ IDEA. User: cheng Date: 2020/11/9 Time: 14:55 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta charset="utf-8"> <title>table模块快速使用</title> <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/layui/css/layui.css" media="all"> </head> <body> <table id="demo" lay-filter="test"></table> <script src="${pageContext.servletContext.contextPath}/layui/layui.js"></script> <script> layui.use('table', function(){ var table = layui.table; //第一个实例 table.render({ elem: '#demo' ,height: 312 ,url: '${pageContext.servletContext.contextPath}/getData' //数据接口 ,page: true //开启分页 ,cols: [[ //表头 {field: 'id', title: 'ID', 80, sort: true, fixed: 'left'} ,{field: 'title', title: '标题', 200} ,{field: 'demoNumber', title: '数字', 200, sort: true} ]] }); }); </script> </body> </html>
2、数据接口
-
新建controller，实现数据接口，返回json数据格式
package com.gec.oasys.controller; import com.gec.oasys.pojo.DemoBean; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; @Controller public class LayuiTestController { @RequestMapping("/getData") @ResponseBody public Map<String,Object> getData() { Map<String,Object> mapData=new HashMap<>(); //组装数据 List<DemoBean> demoBeanList=new ArrayList<>(); demoBeanList.add(new DemoBean(1,"标题一",10.00)); demoBeanList.add(new DemoBean(2,"标题一",10.00)); demoBeanList.add(new DemoBean(2,"标题一",10.00)); demoBeanList.add(new DemoBean(3,"标题一",10.00)); demoBeanList.add(new DemoBean(4,"标题一",10.00)); demoBeanList.add(new DemoBean(5,"标题一",10.00)); demoBeanList.add(new DemoBean(6,"标题一",10.00)); demoBeanList.add(new DemoBean(7,"标题一",10.00)); mapData.put("data",demoBeanList); mapData.put("code","0"); mapData.put("msg",""); return mapData; } }