使用layui进行后端分页展示

最新推荐文章于 2024-07-09 23:16:53 发布

一只猿Hou

最新推荐文章于 2024-07-09 23:16:53 发布

阅读量1.2k

点赞数 1

分类专栏： java 文章标签： html5

本文链接：https://blog.csdn.net/hhuiyao/article/details/114754907

版权

java 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

controller代码

    @RequestMapping("/allNewsList2")
    @ResponseBody
    public Map getAllNews2(Integer currentPage, Integer pageSize) {
    
        PageHelper.startPage(currentPage, pageSize);
        List allNews = newsService.getAllNews();
        Integer count = newsMapper.selectCount(null);
        PageInfo pageInfo = new PageInfo<>(allNews, pageSize);
        
        Map map = new HashMap<>();
        map.put("total", count);
        map.put("data", allNews);
        return map;
    }

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <script type="text/javascript" src="/js/jquery.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/layui/layui.all.js" charset="UTF-8"></script>
    <style type="text/css">
        .table th, .table td {
            text-align: center;
            vertical-align: middle ! improtant;
        }

        .container {
            width: 60%;
        }
    </style>
</head>
<body>
<div class="container content">
    <div class="row">
        <div>
            <div class="panel panel-green margin-bottom-40">
                <div class="panel-heading">
                    <h1 class="panel-title">新闻列表</h1>
                </div>
                <div class="panel-body">
                    <div>
                        <div>
                            <table class="table table-bordered table-striped">
                                <!--<thead>
                                <tr>
                                    <th>序号</th>
                                    <th>姓名</th>
                                    <th>年龄</th>

                                </tr>
                                </thead>-->
                                <!-- 表格数据加载 -->
                                <tbody id="tab_list">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 存放分页的容器 -->
    <div id="layui"></div>
</div>
<script type="text/javascript" charset="UTF-8">
    $(function () {
        initLayPage();
    });

    /**
     * 初始化layui分页
     */

    function initLayPage(pageConf) {
        if (!pageConf) {
            pageConf = {};
            pageConf.pageSize = 10;//设置每页展示几条数据
            pageConf.currentPage = 1;//设置默认当前页为第一页

        }
        $.ajax({
            url: "/notLogged/allNewsList2",//后端查询的url
            type: "post",
            data: pageConf, success: function (data) {
                console.log(data);
                layui.use(['laypage', 'layer'], function () {
                    var page = layui.laypage;
                    page.render({
                        elem: 'layui',
                        count: data.total,
                        curr: pageConf.currentPage,
                        limit: pageConf.pageSize,
                        first: "首页",
                        last: "尾页",
                        layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                        jump: function (obj, first) {
                            if (!first) {
                                pageConf.currentPage = obj.curr;
                                pageConf.pageSize = obj.limit;
                                initLayPage(pageConf);
                            }
                        }
                    });
                });
                console.log(data.data);
                console.log((pageConf.currentPage - 1) * pageConf.pageSize);
                fillTable(data.data, (pageConf.currentPage - 1) * pageConf.pageSize); //页面填充
            }
        })
    }

    //填充表格数据
    function fillTable(data, num) {
        $("#tab_list").html('');
        $.each(data, function (index, obj) {
            // id 很多时候并不是连续的，如果为了显示比较连续的记录数，可以这样根据当前页和每页条数动态的计算记录序号
            index = index + num + 1;
            var info = '';
            info += '<tr>';
            info += '<td>' + index + '</td>';
            info += '<td>' + obj.title + '</td>';
            info += '<td>' + obj.createTime + '</td>';
            info += '<td style="text-align: center;"><a id="read" data-id="' + obj.id + '">点击阅读</a></td>';
            info += '</tr>';
            $("#tab_list").append(info);
        });
    }

    $(document).on('click', '#read', function () {
        let id = $(this).attr("data-id");
        window.location.href = '/notLogged/findNewsInfo?id=' + Number(id)
    })
</script>
</body>
</html>