angular分页

angular分页

// js

        // 当前页
        $scope.p = 1;
        // 每页显示数量
        $scope.pnum = 10;
        // 前后显示多少页
        $scope.qianhou_num = 1;
        // 页面显示多少页码
        $scope.yemian_xianshi_yenum = 3;
        // 前端分页页码显示
        $scope.fenye_yema = [];

// 数据源

$scope.datajh = [];

// 前端循环显示数据
$scope.fenye_data_shuju = [];



        // 分页初始化,前后显示多少页,分页数量
        $scope.canshu_dingyi($scope.qianhou_num,$scope.yemian_xianshi_yenum);
        // 分页数据初始化,第一页
        $scope.fenyefangfa(1);


        // 分页方法
        /*
         * 参数定义
         * yenum 前后显示多少页
         * fenyenumc 分页数量,最多显示多少页
         */ 
        $scope.canshu_dingyi = function(yenum,fenyenumc){
          // 总页数
          $scope.countp = Math.ceil($scope.datajh.length/$scope.pnum);
          for(i=0;i<$scope.countp;i++){
            $scope.fenye_yema[i] = i;
          }
          
          // 处理分页过长
          if($scope.fenye_yema.length>fenyenumc){
            // 得到当前页的前几页,根据参数 yenum
            var kaishi_yema = ($scope.p-yenum-1) <= 0 ? 0 : ($scope.p-yenum-1);
            // 得到当前页的后几页,根据参数 yenum
            var end_yema = ($scope.p+yenum) > $scope.countp ? $scope.countp : ($scope.p+yenum);


            $scope.fenye_yema = [];
            $scope.fenye_key_num = 0;
            // 循环得到分页
            for(i = kaishi_yema;i < end_yema;i++){
              $scope.fenye_yema[$scope.fenye_key_num] = i;
              $scope.fenye_key_num ++;
            }
          }




          
          // 分页数据显示
          $scope.fenye_data_shuju = [];
        }
        /*
         * 分页方法
         * p 当前页
         */ 
        $scope.fenyefangfa = function(p){
          $scope.p = p;
          // 分页初始化,前后显示多少页,分页数量
          $scope.canshu_dingyi($scope.qianhou_num,$scope.yemian_xianshi_yenum);
          $scope.fenye_data_shuju = [];
          $scope.fenye_num = p*$scope.pnum;
          // 分页数据显示key
          $scope.fenye_key_num = 0;
          for(i=($scope.fenye_num-$scope.pnum);i<($scope.fenye_num-$scope.pnum+$scope.pnum);i++){
            if($scope.datajh[i] != undefined){
              $scope.fenye_data_shuju[$scope.fenye_key_num] = $scope.datajh[i];
              $scope.fenye_key_num ++;
            }
          }   
        }

前端

<tr colspan="6">
<td>
<ul class="pagination">
<li class="paginate_button" ng-if="p!=1"><a href="javascript:void(0)" ng-click="fenyefangfa(1)">第一页</a></li>
  
<li class="paginate_button" ng-repeat="v in fenye_yema"><a href="javascript:void(0)" ng-click="fenyefangfa(v+1)">{{v+1}}</a></li>
<li class="paginate_button" ng-if="p!=countp"><a href="javascript:void(0)" ng-click="fenyefangfa(countp)">最后一页</a></li></ul>
</ul>
</td>
</tr>