BootstrapPaginator

BootstrapPaginator插件分页使用

前端用的模版引擎(thymeleaf)

• 前端html页面

<div id="Paginator" style="text-align: center">
          <ul id="page"></ul>
 </div>

• 前端js

 $(function () {
        //后端传递的总页数(如果没有 就会报错) 
        let pageCount = [[${total}]];
        $('#page').bootstrapPaginator({
            currentPage: 1, //当前页
            totalPages: (pageCount % 10) == 0 ? (pageCount / 10) : (pageCount / 10) + 1, //总页
            size: "normal",
            bootstrapMajorVersion: 3,
            alignment: "right",
            numberOfPages: 10,
            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) {
            //这个是点击事件 我这里是请求后台 然后页面刷新
                $.ajax({
                    type: "post",
                    url: prefix + "/refresh",
                    data: {
                        "pageNum": page,
                        "pageSize": 10,
                        "fragment": "fragmentTab"
                    },
                    success: function (data) {
                        $('#fragmentTab').html(data);
                    }
                });
            }
        });
    })