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 相关文章推荐
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
使用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
实用函数10
2007/11/08 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP中文乱码解决方案
2015/03/05 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
JavaScript 参考教程
2006/12/29 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
深入分析jQuery.one() 函数
2020/06/03 jQuery
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
Python自动扫雷实现方法
2015/07/25 Python
python async with和async for的使用
2019/06/20 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Python 从attribute到property详解
2020/03/05 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
六一儿童节主持词
2014/03/21 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
2014年护士长工作总结
2014/11/11 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
暂停营业通知
2015/04/25 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技