Angulars分页加载功能详解

因公司项目要求 最近在写H5项目 遇到了关于分页加载list列表的问题 网上差了一些资料 经过自己整理 完美的实现了分页加载功能 接下来我将记录下详细的实现流程 自己做个记录 也希望可以帮助到其他需要的人

接下来我将详细的写出html文件、JS文件、CSS样式文件来详细完整的呈现出分页的实现流程（JS是重点部分）。

---

首先设置html文件

//augular设置的app名称


    
//引入bootstrap的样式文件
    
//引入CSS样式文件（自定义的样式文件）
    
        

//angular定义的controller

//自定义界面
/*

            


                舆情中心 >
                负面舆情
            

*/

            

//这是augular创建列表 ng-repeat 属性 list是所有数据 n相当于model href使用{{n.url}}跳转链接 其他属性直接n.
                

                    

                        
                        
                    
                
            
        
  
//下面是分页空间界面

  
        
首页
  
        
{{ page }}
  
        
尾页
  
  
  共：{{count}} 条 
//angular.min.js必须倒入

设置JS文件

//设置app(必须写)
var app = angular.module("myapp",[]);     
//设置ng-controller;
app.controller("map_ctrl",function($scope,$http,$location){ 
    //配置  
    $scope.count = 0;  
   //每页加载数据数
    $scope.p_pernum = 10;  
    //index  
    $scope.p_current = 1; 
   //初始化第几页 
    $scope.p_all_page =0;  
  //总页数
    $scope.pages = [];  
    //初始化第一页  

    //获取数据  注意：angular 所有算法必须 按 $scope. 这种方式写    
    //获取数据算法  具体详情 自己去了解angular post请求
    $scope.get = function(page,size,callback){
    var req3 = {
        method: 'post',
        url: "../ashx/news.ashx",
        params: {
            type: "list",
            PageSize: size,
            PageIndex:  page,
            newsType:"1",
            key:"zs999999",
        }
    }
    $http(req3).then(
        function success(res) {  
                $scope.count=res.data.Count; 
                // angular绑定list列表数据
                $scope.list=res.data.R;  
                $scope.p_current = page;  
                $scope.p_all_page = Math.ceil($scope.count/size);  
                reloadPno();  
                callback();  

        },
        function err(e) {
            console.log("err");
        });

      }
//初始化加载
     $scope.get($scope.p_current,$scope.p_pernum,function(){  

    });
//  }  
    //单选按钮选中  
    $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){  
        $scope.get(page,$scope.p_pernum,function(){ });  
    };  
    //初始化页码  
    var reloadPno = function(){  
          $scope.pages=calculateIndexes($scope.p_current,$scope.p_all_page,10);  
        };  
//分页算法  （转载之[齐玉林](http://my.csdn.net/qilin001cs)博客算法）
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;  
   };     
}); 

CSS样式文件

#book ul {
                list-style-type: none;
            }
            
            #book ul li {
                border-bottom: 1px solid #999999;
                ;
                height: 30px;
                line-height: 30px;
                margin-left: 20px;
            }
            
            #book ul li a {
                border-left: 3px solid #6A8AFC;
                padding-left: 8px;
                text-decoration: none;
                color: #666;
            }
            
            #book ul li a:hover {
                color: #58DB5A;
                cursor: pointer;
            }
            
            #book .info {
                border-bottom: 1px solid #999999;
                line-height: 30px;
                margin-left: 10px;
            }
            
            #book .jianjie {
                margin-left: 5px;
                color: #666!important;
            }
            
            .editor-container {
                background-color: #fff!important;
                width: 100%;
                height: 100%;
                font-size: 15px!important;
                font-family: Verdana, Geneva, Tahoma, sans-serif!important;
            }
            
            .htitle {
                left: 50%;
                top: 20%;
                display: inline-block;
                position: absolute;
                color: white;
                margin-left: -100px;
            }
            .page-list .pagination {
                float: left;
            }
            
            .page-list .pagination span {
                cursor: pointer;
            }
            
            .page-list .pagination .separate span {
                cursor: default;
                border-top: none;
                border-bottom: none;
            }
            
            .page-list .pagination .separate span:hover {
                background: none;
            }
            
            .page-list .page-total {
                float: left;
                margin: 25px 20px;
            }
            
            .page-list .page-total input,
            .page-list .page-total select {
                height: 26px;
                border: 1px solid #ddd;
            }
            
            .page-list .page-total input {
                width: 40px;
                padding-left: 3px;
            }
            
            .page-list .page-total select {
                width: 50px;
            }
            

---

OK 到这里问题就完美的实现了分页功能 我们的接口因为封装 如果其他人使用接口请求数据需要自己实现 其他功能可以直接搬用 希望会对大家有帮助