使用layui进行前端分页展示

controller代码

 /*
     * 查询显示所有新闻
     * 前端分页
     * */

    @RequestMapping("/allNewsList")
    @ResponseBody
    public Map getAllNews() {
        List allNews = newsService.getAllNews();
        Integer count = newsMapper.selectCount(null);
        Map map = new HashMap<>();
        map.put("total", count);
        map.put("data", allNews);
        return map;
    }
<!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;

        }
        $.post("/notLogged/allNewsList", pageConf, 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>

使用layui进行后端分页请看下一篇

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值