js 手写分页

效果：

原型是angular编写的一下为angular1.X语法

HTML:

      <div class="pull-left flex-r">
        <div class="prev"><a href ng-click="prev()">上一页</a></div>
        <ul class="pagination pageUl" ng-init="ininPageBox()" id="pageBox"></ul>
        <div class="next"><a href ng-click="next()">下一页</a></div>
      </div>

JS:

       $scope.entity={
        list:[],      //所有数据
        crruentList:[],   //1页显示数据
        
      }
      $scope.page = {
        currentPage: 1, // 当前页 （请求数据）
        pageSize: 2, // 每页记录数 （请求数据）
        totalCount: 0, // 总记录数 （响应数据）
        totalPages: 0, // 总页数 （根据 总记录数、每页记录数 计算 ）
      }

      $scope.ininPageBox= function(){
        element = document.getElementById('pageBox')
        $scope.selectPage(1);     //初始化第一页
      }
        
      //指定页
      var element;
      $scope.selectPage = function(page){
        $(element).empty()
        // page 超出范围
        if($scope.page.totalPages != 0 && (page < 1 || page > $scope.page.totalPages)) {
          return;
        }
        $scope.page.totalCount = $scope.entity.list.length; //总记录数
        $scope.page.totalPages = Math.ceil($scope.entity.list.length/$scope.page.pageSize)    //总页数
        $scope.page.currentPage = page;  //当前页
        $scope.entity.crruentList =$scope.entity.list.slice(($scope.page.currentPage-1)*$scope.page.pageSize,$scope.page.currentPage*$scope.page.pageSize)

        var content =''   //初始化内容
        if($scope.page.totalPages > 6){
          if($scope.page.currentPage <5){
            for(let i =1; i< 6; i++){
              if($scope.page.currentPage == i){
                content+=`<li class='current' ng-click="selectPage(${i})">${i}</li>`
              }else{
                content +=`<li ng-click="selectPage(${i})">${i}</li>`
              }
            }
            content +=`<li class='prohibit'>···</li><li ng-click="selectPage(${$scope.page.totalPages})">${$scope.page.totalPages}</li>`
          }else{
            if($scope.page.currentPage < $scope.page.totalPages -3){
              for(let i = $scope.page.currentPage -2; i<$scope.page.currentPage +3; i++){
                if($scope.page.currentPage == i){
                  content+=`<li class='current' ng-click="selectPage(${i})">${i}</li>`
                }else{
                  content +=`<li ng-click="selectPage(${i})">${i}</li>`
                }
              }
              content +=`<li class='prohibit'>···</li><li ng-click="selectPage(${$scope.page.totalPages})">${$scope.page.totalPages}</li>`
            }else{
              content +=`<li ng-click="selectPage(1)">1</li><li class='prohibit'>···</li>`
              for(let i=$scope.page.totalPages-4;i<$scope.page.totalPages+1;i++){
                if($scope.page.currentPage == i){
                  content+=`<li class='current' ng-click="selectPage(${i})">${i}</li>`
                }else{
                  content +=`<li ng-click="selectPage(${i})">${i}</li>`
                }
              }
            }
          }
        }else{
          for(let i=1;i<$scope.page.totalPages+1;i++){
            if($scope.page.currentPage == i){
              content+=`<li class='current' ng-click="selectPage(${i})">${i}</li>`
            }else{
              content +=`<li ng-click="selectPage(${i})">${i}</li>`
            }
          }
        }
        content = angular.element(content)
        $compile(content)($scope);
        $(element).append(content)
      }

      //加载上一页
      $scope.prev = function() {
        if ($scope.page.currentPage == 1) {
          $scope.selectPage(1);
        } else {
          $scope.selectPage($scope.page.currentPage - 1);
        }
      }
      //加载下一页
      $scope.next = function() {
        if ($scope.page.currentPage == $scope.page.totalPages) {
          $scope.selectPage($scope.page.totalPages);
        } else {
          $scope.selectPage($scope.page.currentPage + 1);
        }
      }