不修改sql语句，通过layui框架实现分页

主要是查询sql已经写好了很多类，不想修改，所以使用layui框架直接在前端实现分页

//显示数据列表

<ul id="asd">

</ul>

//分页按钮
<div id="laypage"></div>

<script type="text/javascript">
        $(function () {
            showData()  //请求数据
            showPage()     //分页操作
        });

        let pageNum = 1; //设置首页页码
        let pageSize = 5;  //设置一页显示的条数
        let total;    //总条数
        let  pages; //一共多少页

        function showData() {
            $.ajax({
                type: "get",
                url: "/aa/list",//对应controller的URL
                async: false,
                dataType: 'json',
                data: {
                    "pageNum": pageNum,
                    "pageSize": pageSize,
                },
                success: function (res) {//返回查询结果，我返回的是map集合
                    total = res.data.news.length;  //设置总条数
                    pages = res.data.news.length/5; //设置总页数，初始每页显示5条
                    console.log(res);
                    let fin= res.data.news;//我返回的是map集合，根据需求变化
                    $("[id=asd]").empty()//换页清空
                    for (let i = (pageNum-1)*pageSize; i < pageNum*pageSize; i++) {//换页之后数据显示
                        if (i < total) {
                            $("<li><a href='/details?no=1&id=" + fin[i]?.id + "'>" + fin[i]?.title + "</a><span>" + fin[i]?.createTime + "</span></li>").appendTo("[id=asd]")
                        }
                    }

                }
            });
        }
        function showPage() {
            layui.use('laypage', function () {
                let laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'laypage',  //注意laypage是 ID，不用加 # 号
                    count: total, //数据总数，从服务端得到
                    limit: pageSize,   //每页条数设置
                    limits: [5, 10, 20, 30],            //可选每页显示条数
                    curr: 1,                      //起始页
                    groups: 3,                     //连续页码个数
                    prev: '上一页',               //上一页文本
                    next: '下一页',                //下一页文本
                    first: 1,                    //首页文本
                    last: pages,                   //尾页文本
                    layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                    jump: function (obj, first) {  //触发分页后的回调
                        //obj包含了当前分页的所有参数，第一次加载first为true
                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数
                        pageNum = obj.curr;  //改变当前页码
                        pageSize = obj.limit;
                        //首次不执行，一定要加此判断，否则初始时会无限刷新
                        if (!first) {
                            showData()  //加载数据
                        }
                    }
                });
            });
        }
    </script>