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 相关文章推荐
js树形控件脚本代码
Jul 24 Javascript
js实现简单模态窗口,背景灰显
Nov 14 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
javascript利用键盘控制小方块的移动
Apr 20 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实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python中使用ElementTree解析XML示例
2015/06/02 Python
简单谈谈Python流程控制语句
2016/12/04 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
有趣的python小程序分享
2017/12/05 Python
python爬虫实现中英翻译词典
2019/06/25 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
十佳教师事迹材料
2014/01/11 职场文书
合作意向协议书范本
2014/03/31 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
python中的getter与setter你了解吗
2022/03/24 Python