前端实现分页是一个插件bootstrap-paginator.js

参考地址：
https://www.cnblogs.com/zooey/p/9218089.html
https://blog.csdn.net/qq_37936542/article/details/81558363
https://www.cnblogs.com/moretry/p/4441728.html
实现过程

1. 导入bootstrap-paginator.js插件

//我创建的maven项目是这样引入的
<%--1.导入bootstrap-paginator.js分页插件--%>
    <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>

2. 使用块状标签来实现
   在你放分页的位置绑定一个id
   例如：<ul id="pagination"></ul>
3. 块状标签ul加载 bootstrapPaginator() 函数

<%--3.实现标签点击效果--%>
    <script>
        $(function () {
        //    找到ul
            $("#pagination").bootstrapPaginator({
                bootstrapMajorVersion:3,//bootstrap的版本
                currentPage:1,/*指定点击当前页面*/
                totalPages:5,/*每页最多显示几条数据最多5，最少1*/
                pageUrl:function (type,page,current) { //改变新的请求数据
                    //type 按钮类型=>首页/末页/上一页/下一页
                    //page 点击按钮1.2.3.4
                    //current 点击当前页面
                    /*window.alert("page="+page);*/
                    /*return "/productType/findAll?pageNumber="+page;*/
                },
                itemTexts:function (type,page,current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                    }
                }
            });
        });
    </script>

4. 设置分页居中
   绑定样式为 text-center