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 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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
isset和empty的区别
2007/01/15 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
js打造数组转json函数
2015/01/14 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
深入理解python try异常处理机制
2016/06/01 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python实现简易通讯录修改版
2018/03/13 Python
python实现转圈打印矩阵
2019/03/02 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
Python类如何定义私有变量
2020/02/03 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
优秀毕业生求职信范文
2014/01/02 职场文书
周年庆典主持词
2014/04/02 职场文书
自我推荐信范文
2014/05/09 职场文书
公司授权委托书
2014/10/17 职场文书
平凡的世界读书笔记
2015/06/25 职场文书