Angular1.x实现分页和分页算法

页面HTML代码：

 

1. <!-- paging -->
   <ul class="pagination" style="margin: 0px;" >
           <li ng-class="{true:'disabled'}[p_current==1]"><a href="javascript:void(0);" ng-click="p_index()">首页</a></li>
           <li ng-repeat="page in pages" ng-class="{true:'active'}[p_current==page]"><a href="javascript:void(0);" ng-click="load_page(page)">{{ page }}</a></li>
           <li ng-class="{true:'disabled'}[p_current==p_all_page]"><a href="javascript:void(0);" ng-click="p_last()">尾页</a></li>
   </ul>

 

<span style="vertical-align: 12px;">  共：{{count}} 条</span>

Js代码：

var app = angular.module("myApp",[]);    

app.controller("map_ctrl",function($scope,$http,$location){
    //配置
    $scope.count = 0;
    $scope.p_pernum = 10;
    //变量
    $scope.p_current = 1;
    $scope.p_all_page =0;
    $scope.pages = [];
    //初始化第一页
    _get($scope.p_current,$scope.p_pernum,function(){
        alert("我是第一次加载");
    });
    //获取数据
    var _get = function(page,size,callback){
        $http.get("xxx.html?status=0&page="+page+"&size="+size).success(function(res){
            if(res&&res.status==1){
                $scope.count=res.count;
                $scope.list=res.list;
                $scope.p_current = page;
                $scope.p_all_page =Math.ceil($scope.count/$scope.p_pernum);
                reloadPno();
                callback();
            }else{
                alert("加载失败");
            }
        });    
    }
    //单选按钮选中
    $scope.select= function(id){
        alert(id);
    }
    //首页
    $scope.p_index = function(){
        $scope.load_page(1);
    }
    //尾页
    $scope.p_last = function(){
        $scope.load_page($scope.p_all_page);
    }
    //加载某一页
    $scope.load_page = function(page){
        _get(page,$scope.p_pernum,function(){ });
    };
    //初始化页码
    var reloadPno = function(){
          $scope.pages=calculateIndexes($scope.p_current,$scope.p_all_page,8);
        };
//分页算法
var calculateIndexes = function (current, length, displayLength) {
   var indexes = [];
   var start = Math.round(current - displayLength / 2);
   var end = Math.round(current + displayLength / 2);
    if (start <= 1) {
        start = 1;
        end = start + displayLength - 1;
       if (end >= length - 1) {
           end = length - 1;
        }
    }
    if (end >= length - 1) {
       end = length;
        start = end - displayLength + 1;
       if (start <= 1) {
           start = 1;
        }
    }
    for (var i = start; i <= end; i++) {
        indexes.push(i);
    }
    return indexes;
  };
 

});

分页算法：

current ：当前页码，length：总页码，displayLength：显示长度      @return  array[1,2,3,4,5,6,7,8]

 

    
 var calculateIndexes = function (current, length, displayLength) {
        var indexes = [];
        var start = Math.round(current - displayLength / 2);
        var end = Math.round(current + displayLength / 2);
        if (start <= 1) {
            start = 1;
            end = start + displayLength - 1;
            if (end >= length - 1) {
                end = length - 1;
            }
        }
        if (end >= length - 1) {
            end = length ;
            start = end - displayLength + 1;
            if (start <= 1) {
                start = 1;
            }
        }
        for (var i = start; i <= end; i++) {
            indexes.push(i);
        }
        return indexes;
    };

---

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！