angular.js分页代码的实例


Posted in Javascript onJuly 27, 2016

对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下,我们的数据会比较多,无法很好地显示在单个页面中。在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能。现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入 标签即可调用。

先来看下效果图

angular.js分页代码的实例

实例代码

app.directive('pagePagination', function(){
  return {
    restrict : 'E',
    template : '<div class="pagination-box"><ul class="pagination"><li ng-class="page.style" ng-repeat="page in pageList"><a href="{{ page.link }}">{{ page.name }}</a></li></ul><ul class="pagination" ng-if="pageList[0]"><li class="page-count disabled"><span>共 <b>{{ pageRecord }}</b> 条记录 / 共 <b>{{ pageCount }}</b> 页</span></li></ul></div>',
    replace : true,
    scope : {
      "pageId"      : "=",
      "pageRecord"    : "=",
      "pageSize"     : "=",
      "pageUrlTemplate"  : "="
    },
    controller : ['$scope', function($scope){
       
      $scope.getLink = function(pageId){
        return $scope.pageUrlTemplate.replace("{PAGE}", pageId);
      };
 
      $scope.getPageList = function(){
        var page = [];
        var firstPage = parseInt(( $scope.pageId - 1 ) / $scope._pageSize ) * $scope._pageSize + 1;
        page.push({
          name  : '首页',
          style  : $scope.pageId == 1 ? "disabled" : "",
          link  : $scope.getLink(1)
        });
        page.push({
          name  : '上一页',
          style  : $scope.pageId == 1 ? "disabled" : "",
          link  : $scope.getLink(1)
        });
        for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){
          if( pageId >= 1 && pageId <= $scope.pageCount ){
            page.push({
              name  : pageId,
              link  : $scope.getLink(pageId),
              style  : pageId == $scope.pageId ? "active" : ""
            });
          }
        }
        page.push({
          name  : '下一页',
          style  : $scope.pageId == $scope.pageCount ? "disabled" : "",
          link  : $scope.getLink($scope.pageCount)
        });
        page.push({
          name  : '尾页',
          style  : $scope.pageId == $scope.pageCount ? "disabled" : "",
          link  : $scope.getLink($scope.pageCount)
        });
        return page;
      };
 
      $scope.pageInit = function(){
        if( !$scope.pageId || !$scope.pageRecord ){
          setTimeout(function(){
            $scope.$apply(function(){
              $scope.pageInit();
            });
          }, 10);
        }else{
          if( !!$scope.pageSize ){
            $scope._pageSize = parseInt($scope.pageSize);
          }else{
            $scope._pageSize = 10;
          }
          $scope.pageId    = parseInt($scope.pageId);
          $scope.pageCount  = parseInt(( $scope.pageRecord - 1 ) / $scope._pageSize ) + 1;
          if( $scope.pageId < 1 ){
            $scope.pageId = 1;
          }else if( $scope.pageId > $scope.pageCount ){
            $scope.pageId = $scope.pageCount;
          }
          $scope.pageLoad   = true;
          $scope.pageList   = $scope.getPageList();
        }
      };
       
      $scope.pageLoad = false;
      $scope.pageInit();
    }]
  }
});

调用代码:

<page-pagination
  page-id="pageId"
  page-record="recordCount"
  page-url-template="urlTemplate">
</page-pagination>

以上就是angular.js分页代码的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
基于jquery的放大镜效果
May 30 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
vue 中的动态传参和query传参操作
Nov 09 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 #Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 #Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 #Javascript
js中遍历对象的属性和值的方法
Jul 27 #Javascript
js中的关联数组与普通数组详解
Jul 27 #Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 #Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 #Javascript
You might like
php 购物车的例子
2009/05/04 PHP
PHP 组件化编程技巧
2009/06/06 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
php微信开发之谷歌测距
2018/06/14 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
JS的反射问题
2010/04/07 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
初步解析Python中的yield函数的用法
2015/04/03 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
python实现自动解数独小程序
2019/01/21 Python
python交易记录整合交易类详解
2019/07/03 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
介绍一下Ruby的特点
2013/01/20 面试题
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
高二美术教学反思
2014/01/14 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
MySQL三种方式实现递归查询
2022/04/18 MySQL
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS