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 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
JS forEach跳出循环2种实现方法
Jun 24 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
react中props 的使用及进行限制的方法
Apr 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
PHP安全编程之加密功能
2006/10/09 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
PHP整合PayPal支付
2015/06/11 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
详解js闭包
2014/09/02 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
Python单元测试简单示例
2018/07/03 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
django创建css文件夹的具体方法
2020/07/31 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
预备党员党课思想汇报
2014/01/13 职场文书
社区庆八一活动方案
2014/02/02 职场文书
七一表彰大会简报
2015/07/20 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis