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 07 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
vue权限问题的完美解决方案
May 08 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
如何在 Vue 中使用 JSX
Feb 14 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
一个程序下载的管理程序(四)
2006/10/09 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
日期和时间问题
2015/01/04 面试题
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
先进个人总结范文
2015/02/15 职场文书
通知函的格式
2015/04/27 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
售房协议书范本
2015/08/11 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
python实现手机推送 代码也就10行左右
2022/04/12 Python