左侧thymeleaf 动态绑定li，右侧layui table

pom.xml 添加pagehelper 依赖

<!--pagehelper-->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.3.0</version>
    </dependency>           

MyBatisConfig 添加 注解 （ssm java类注解，可以看我前面的文章）

@Bean
    public PageHelper pageHelper(){
        //分页插件
        PageHelper pageHelper = new PageHelper();
        Properties properties = new Properties();
        properties.setProperty("helperDialect", "mysql");
        properties.setProperty("reasonable", "true");
        pageHelper.setProperties(properties);
        return pageHelper;

    }           

实体类 subject:

package com.pojo;

public class Subject {
    private Integer id;
    private String sname;
    private Integer gradelevel;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getSname() {
        return sname;
    }

    public void setSname(String sname) {
        this.sname = sname;
    }

    public Integer getGradelevel() {
        return gradelevel;
    }

    public void setGradelevel(Integer gradelevel) {
        this.gradelevel = gradelevel;
    }
}
           

实体类:Grade

package com.pojo;

public class Grade {
    private Integer id;
    private String gname;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getGname() {
        return gname;
    }

    public void setGname(String gname) {
        this.gname = gname;
    }
}
           

数据层接口: GradeMapper 和SubjectMapper

public interface GradeMapper {
    @Select("select * from grade")
    public List<Grade> getAll();
}
           

public interface SubjectMapper {
    @Select("select * from subject")
    public List<Subject>findAlls();
    @Select({
        "<script>"+
                "select * from subject where"+
                "<if test='gradelevel!=0'> gradelevel=#{gradelevel}</if>"+
                "<if test='gradelevel==0'> 1=1 </if>"+
                "order by id desc limit #{page},#{limit}"+
            "</script>"
    })
    public List<Subject>Fy(@Param("page") Integer page,
                           @Param("limit")Integer limit,@Param("gradelevel") int gradelevel);
   
}           

GradeServiceImpl 和SubjectServiceImpl 实现接口（service 层的接口就不赘述了，把mapper的接口复制粘贴即可，顺便把@Param() 这玩意干掉）

@Service
public class GradeServiceImpl implements GradeService {
    @Autowired
    private GradeMapper mapper;
    @Override
    public List<Grade> getAll() {
        return mapper.getAll();
    }
}           

package com.service.impl;

import com.mapper.SubjectMapper;
import com.pojo.Subject;
import com.service.SubjectService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public class SubjectServiceImpl implements SubjectService {
    @Autowired
    private SubjectMapper mapper;

    @Override
    public List<Subject> findAlls() {
        return mapper.findAlls();
    }

    @Override
    public List<Subject> Fy(Integer page, Integer limit,int id) {
        return mapper.Fy(page,limit, id);
    }
}
           

Controller 控制器层 （thymeleaf 模板引擎这些，可以看前面的文章）

@Controller
public class SubjectController {
    @Autowired
    private SubjectService service;
    @Autowired
    private GradeService gservice;
    @GetMapping("/subjectshow")
    public String subjectshow(HttpSession session){
        List<Grade> all = gservice.getAll();
        session.setAttribute("all", all);
        return "views/subjectshow.htm";
    }
    @GetMapping("/subjectshows")
    @ResponseBody
    public Object subjectshows(Integer page,Integer limit,String id){
        PageHelper.startPage(page,limit);
        List<Subject> all=service.findAlls();//得到所有
        PageInfo<Subject> pageInfo=new PageInfo<Subject>(all);
        int ids=Integer.parseInt(id)>0?Integer.parseInt(id):0;
        List<Subject> list = service.Fy((page-1)*limit, limit,ids);
        int count=(int)pageInfo.getTotal();//得到总条数
        String str= ConvertUtil.ConvertPageJson(list,count);
        JSONObject object = JSON.parseObject(str);
        return object;
    }
}           

前台页面：

<!DOCTYPE html>
<html leng="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="views/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="views/css/layuimini.css?v=2.0.4.2" media="all">
    <link rel="stylesheet" href="views/css/themes/default.css" media="all">
    <link rel="stylesheet" href="views/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <script src="views/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="views/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
    <script src="views/js/common.js" charset="utf-8"></script>
    <script src="views/js/x-layui.js" charset="utf-8"></script>
    <!--[if lt IE 9]>
    <script src="views/lib/export-word/excanvas-IE8.js"></script>
    <script src="views/lib/export-word/jqueryWordExport-IE8.js"></script>
    <script src="views/lib/other/html5.min.js"></script>
    <script src="views/lib/other/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!-- 左树 -->
        <div class="layui-col-xs9 layui-col-md4">
            <div class="layui-panel">
                <h3 th:text="年级名称"></h3>
                <ul class="layui-menu layui-menu-lg">
                    <th:block th:each="grade:${session.all}">
                        <li class="layui-menu-item-divider">
                            <div class="layui-menu-body-title" th:id="${grade.getId()}"
                                 style="text-align: center;line-height: 30px;border: 1px solid gainsboro"
                                 th:text="${grade.getGname()}">
                              <!--   th:onclick="|javascript:cool(${grade.getId()})|"--></div>
                        </li>
                    </th:block>
                </ul>

            </div>
        </div>
        <!-- 右表 -->
        <div class="layui-col-sm12 layui-col-md8 layui-col-lg9">
            <div class="layui-card">
                <button class="layui-btn" onclick="user_add('添加用户','/getgrade','300','300')">添加</button>
                <table class="layui-table" id="rtTable" lay-filter="rtTable"></table>
                <script type="text/html" id="toolbar2" lay-filtter="test1" >
                    <a type="submit" class="layui-btn layui-btn-normal layui-btn-sm"
                       onclick="user_edit('用户编辑','/getgrade?id={{d.id}}','300','300')">
                        修改
                    </a>
                    <a type="submit" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">
                        删除
                    </a>
                </script>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    layui.use(['table','jquery','layer'],function () {
        $=layui.jquery,
            layer=layui.layer,
            table=layui.table
        let tables=function(ids){
            table.render({
                elem:'#rtTable',
                url:'/subjectshows',
                toolbar:'#toolbar1',
                where:{"id":ids},
                cols:[
                    [
                        {field:'id',title:'编号',sort:true,width:100,funcation(d){let id=d.id;}},
                        {field:'sname',title:'科目名称',sort:true,width:120},
                        {field: 'gradelevel',title: '年级名称',width: 100, align: 'center',
                            templet: function (d) {
                                let type = d.gradelevel;
                                let gradelevel = '未知'
                                switch (type) {
                                    case 1:
                                        gradelevel = '大专';
                                        break;
                                    case 2:
                                        gradelevel = '中专';
                                        break;
                                    case 3:
                                        gradelevel = '中专过渡班';
                                        break;
                                }
                                return gradelevel;
                            }
                        },
                        {title: '操作',toolbar:'#toolbar2',align:'center',width: 240}
                    ]
                ],
                limits:[5,10,20,50,100],
                limit:5,//每页显示几行数据
                page:true,//开启分页
                parseData:function (res) {
                    return{
                        "code":0,
                        "count":res.count,
                        "data":res.data
                    }
                },
                done:function (res,curr,count) {

                }
            });
        }
        tables(0);
        table.on('tool(currentTableFilter)',function (obj){
            var data=obj.data;
            layer.confirm('是否确定要删除？',function (index) {
                var res1=post('/gradedel',{id:data.id});
                if(res1!=null){
                    let index=layer.alert('删除成功！',function () {
                        layer.close(index);
                        //删除之后刷新页面
                        tables(0).reload({
                            where:{'username':"user-0"},
                            page:{
                                curr:1// 重新定义倒第一页
                            }
                        });
                    });
                }else layer.alert('删除有误！',{icon:5});
                return false;
            })
        });
        $('li>div').click(function (){
           tables(this.id);
        });
    });



</script>
</body>
</html>