report/app/common/view/notice/index.html

{extend name="layout/content" /}
{block name="content"}
<div class="container-fluid" style="padding: 0 !important;">
    <div class="row">
        <input type="hidden" id="noticeCount" value="{$total}">
        <div class="col-sm-12" id="notices">
        </div>
    </div>
    <div class="page" style="text-align: center;height: 80px;width: 100%;position: fixed;bottom: 0;">
        <ul class="pagination"></ul>
    </div>
</div>

<link href="/static/css/bootstrapv3.min.css" rel="stylesheet">
<link href="/static/css/notice.css" rel="stylesheet">
<script type="text/javascript">

    let pageSize = 6;
    let currentPage = 1;
    var totalPages = $("#noticeCount").val();
    $(function () {
        render();
    });
    function render() {
        $.ajax({
            url: "/common/notice/list",
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: "json",
            success: function (result) {
                var html = "";
                for (var key in result) {
                    html = html + "<div class=\"alert alert-success alert-dismissable\" style='background-color: #f5f5f5;position: relative;min-height: 75px;'>\n" +
                            "<button aria-hidden=\"true\" data-dismiss=\"alert\" class=\"close\" type=\"button\">×</button>\n" +
                            result[key].content +
                            "<span style='right: 50px;bottom: 5px;position: absolute'><i class='fa fa-calendar'></i> &emsp;" + result[key].createtime + "</span>" +
                            "</div>";
                }
                $("#notices").empty().append(html);
                setPage(currentPage, Math.ceil(totalPages / pageSize), render)
            }
        })

    }
    function setPage(pageCurrent, pageSum, callback) {
        $('.pagination').bootstrapPaginator({
            currentPage: pageCurrent, //当前页。
            totalPages: pageSum, //总页数。
            size: "large", //应该是页眉的大小。
            bootstrapMajorVersion: 3, //bootstrap的版本要求。
            alignment: "center",
            numberOfPages: 6, //显示的页数
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },
            onPageClicked: function (event, originalEvent, type, page) {
                // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
                currentPage = page;
                callback && callback()
            }
        });
    }
</script>
{/block}