Angularjs实现分页和分页算法的示例代码


Posted in Javascript onDecember 23, 2016

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

页面展示效果:

Angularjs实现分页和分页算法的示例代码

页面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; 
};

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

Javascript 相关文章推荐
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
js自定义回调函数
Dec 13 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 #Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 #Javascript
JS敏感词过滤代码
Dec 23 #Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 #Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 #Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 #Javascript
Bootstrap和Java分页实例第一篇
Dec 23 #Javascript
You might like
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
简单介绍Python中的decode()方法的使用
2015/05/18 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
python 基于wx实现音乐播放
2020/11/24 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
党员公开承诺书范文
2014/03/25 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL