bootstrap-paginator插件的使用

  <script src="js/basic/jquery-3.4.1.js"></script>
  <script src="js/basic/bootstrap.min.js"></script>
  <script src="js/basic/bootstrap-paginator.js"></script>

<!-- pagination section -->
<div class="pagination_main" id="paginationMain">
    <nav class="text-right"> <!--text-right 右对齐，bootstrap中样式-->
        <ul id="pagination" class="pagination"></ul>
　　</nav>
</div>

<script>
    //分页功能
      var setPaginator = function (totalPages,curPage) {
          $('#pagination').bootstrapPaginator({
              bootstrapMajorVersion: 3, //对应bootstrap版本
              alignment: 'center',
              size: 'small', //分页大小
              currentPage: curPage, //当前页
              numberOfPages: 5, //显示的页数
              totalPages: totalPages, // 总页数
              itemTexts: function (type, page, current) {
                   switch (type) {
                       case "first":
                           return "首页";
                       case "prev":
                           return "上一页";
                       case "next":
                           return "下一页";
                       case "last":
                           return "末页";
                       case "page":
                           return page;
                   }

               },
               /**
                * 分页点击事件
                * @param event [jquery对象]
                * @param originalEvent [dom原生对象]
                * @param type [按钮类型]
                * @param page [点击按钮对应的页码]
                */
               onPageClicked: function (event, originalEvent, type, page) {
                   curPage = page;//根据点击页数渲染页面
                   getListInfo(curPage);//重新渲染数据
              }
          })
      };
  </script>

<script>
        var pageSize = 10; // 页条数
        var curPage = 1; // 页码
        // 渲染分页插件
    　　setPaginator(totalPages,curPage)
  </script>