Angularjs实现分页和分页算法的示例代码  更新时间:2016年12月23日 14:23:05   作者:972720606   分页是很多web应用都会用到的,本篇文章主要介绍了Angularjs实现分页和分页算法的示例代码,具有一定的参考价值,有兴趣的可以了解一下。 对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下,我们的数据会比较多,无法很好地显示在单个页面中。在这种情况下,我们需要把数据以页的方式来展示。 页面展示效果: 页面HTML代码: 选择 企业名称 企业地址 状态 {{l.name}} {{l.address}} {{l.status_str}} 首页 {{ page }} 尾页 共:{{count}} 条 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 = 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 = 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; }; 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章: AngularJS 与Bootstrap实现表格分页实例代码 Angularjs 实现分页功能及示例代码 AngularJS实现分页显示数据库信息 学习Angularjs分页指令 基于Angularjs实现分页功能 AngularJs实现分页功能不带省略号的代码 angularjs表格分页功能详解 ANGULARJS中使用JQUERY分页控件 angularjs 分页 相关文章 详解angular 中的自定义指令之详解API 本篇文章主要介绍了angular 中的自定义指令之详解API,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 AngularJS基础 ng-repeat 指令简单示例 本文主要讲解AngularJS ng-repeat 指令,这里对ng-repeat的基础资料做了整理,并附有示例代码,有兴趣的朋友可以参考下 2016-08-08 AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制) 这篇文章主要介绍了AngularJS实现用户登录状态判断的方法,通过Model添加拦截过滤器,路由增加限制实现针对登陆状态的判断功能,需要的朋友可以参考下 2016-12-12 angular2+nodejs实现图片上传功能 这篇文章主要介绍了angular2+nodejs实现图片上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-03-03 AngualrJS中每次$http请求时的一个遮罩层Directive AngularJS是一款非常强大的前端MVC框架。接下来通过本文给大家介绍AngualrJS中每次$http请求时的一个遮罩层Directive,本文非常具有参考借鉴价值,特此分享供大家学习 2016-01-01 AngularJS删除路由中的#符号的方法 这篇文章主要介绍了AngularJS删除路由中的#符号的方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2016-09-09 Angular中ng-repeat与ul li的多层嵌套重复问题 这篇文章主要介绍了Angular中ng-repeat与ul li的多层嵌套重复问题,需要的朋友可以参考下 2017-07-07 webapp框架AngularUI的demo改造之路 这篇文章主要介绍了webapp框架AngularUI的demo改造之路,需要的朋友可以参考下 2014-12-12 AngularJS路由删除#符号解决的办法 这篇文章主要介绍了AngularJS路由删除#符号解决的办法的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下 2017-09-09 由浅入深剖析Angular表单验证 这篇文章主要介绍了由浅入深剖析Angular表单验证 的相关资料,需要的朋友可以参考下 2016-07-07 最新评论

对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下,我们的数据会比较多,无法很好地显示在单个页面中。在这种情况下,我们需要把数据以页的方式来展示。

页面展示效果:

页面HTML代码:

<table class="table table-striped" style="margin: 0px;"> 
   <thead> 
    <tr> 
      <td>选择</td> 
      <td>企业名称</td>                
      <td>企业地址</td> 
      <td>状态</td> 
    </tr> 
  </thead> 
  <tbody> 
    <tr ng-repeat="l in list"> 
      <td><input type="radio" name="id" ng-click="select(l.id)" value="{{l.id}}" /></td> 
      <td>{{l.name}}</td> 
      <td>{{l.address}}</td> 
      <td>{{l.status_str}}</td> 
    </tr> 
  </tbody> 
</table> 
<!-- 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; 
}; 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • AngularJS 与Bootstrap实现表格分页实例代码
  • Angularjs 实现分页功能及示例代码
  • AngularJS实现分页显示数据库信息
  • 学习Angularjs分页指令
  • 基于Angularjs实现分页功能
  • AngularJs实现分页功能不带省略号的代码
  • angularjs表格分页功能详解
  • ANGULARJS中使用JQUERY分页控件
张贴在3