angular分页指令操作


Posted in Javascript onJanuary 09, 2017

目前的多个项目中都用到分页这个功能,为了提高可复用性,我特地分离出来写了个分页的指令。直接贴代码,详情如下:

index.html

<body id="sBill" ng-controller="map_ctrl">
  <table class="table table-striped" style="margin: 0px;border:1px solid #ccc;width:800px;min-height:200px;">      
   <tbody> 
     <tr ng-repeat="l in orderList"> 
       <td><input type="radio" name="id" ng-click="select(l.id)" value="{{l.id}}" /></td> 
       <td>{{l.time}}</td>         
     </tr> 
   </tbody> 
  </table> 
  <!-- paging datalist属性值(dataList)为要分页的原始数据--> 
  <rj-date datalist="dataList"></rj-date> 

 </body>

index.js

var app = angular.module("doSBill",[]);

app.controller("map_ctrl",function($scope,$http,$location,$timeout){ 
  // 原始数据
  $scope.dataList=[
  {'time':1},{'time':2},{'time':3},{'time':4},{'time':5},{'time':6},{'time':7},{'time':8},{'time':9},{'time':10},
  {'time':11},{'time':12},{'time':13},{'time':14},{'time':15},{'time':16},{'time':17},{'time':18},{'time':19},{'time':20},
  {'time':21},{'time':22},{'time':23},{'time':24},{'time':25},{'time':26},{'time':27},{'time':28},{'time':29},{'time':30},
  {'time':31}
  ];
  //$on:监听或接收数据;此处用于监听分页指令,修改的列表视图数据
  $scope.$on("orderList", function(e, orderList){
   $scope.orderList = orderList;
  });

});

 指令模板  page.html

<div>
 <p>
  <span>
   总记录数:<span class="rjAllNums" ng-bind="page.nums"></span>
   本页记录数:<span class="rjNowNums" ng-bind="page.nowNums"></span>
  </span>
  <button class="rjFirtPage" ng-click="jumpPage(1,dataList)">首页</button>
  <button class="rjPrePage" ng-click="jumpPage(page.now-1,dataList)">上一页</button>
  <span>
   <span class="rjNowPage" ng-bind="page.now"></span>/
   <span class="rjAllPage" ng-bind="page.pageCount"></span>
  </span>
  <button class="rjNextPage" ng-click="jumpPage(page.now+1,dataList)">下一页</button>
  <button class="rjLastPage" ng-click="jumpPage(page.pageCount,dataList)">尾页</button>
  到第 
  <input class="rjJumpInput" type="text" ng-model="page.jumpPage" name="rjPageName" value=""/>
   页
  <button class="rjJumpBtn" ng-click="jumpPage(page.jumpPage,dataList)">确定</button>
 </p>

</div>

指令定义page.js

app.directive('rjDate',function(){
    return {
      restrict: 'EA',  
      replace: false,
      scope : {dataList:'=datalist'},//设置scope.dataList与指令属性“datalist”值绑定,详情看指令scop作用域      
      templateUrl: 'pageDirective/template/page.html',  
      link: function(scope,elem,attr){

        var page={};//分页对象
        scope.page=page;
        scope.page.onePageNums=10; //每页记录数
        scope.page.nums=0;
        scope.page.now=1;
        scope.page.nowNums=0;
        scope.page.pageCount=1;
        scope.getPage=getPage; //设置获取页面的ng-click
        scope.page.orderList=[];

        getPage(1,scope.dataList);//初始化获取第一页数据

        scope.jumpPage=function(page,dataList){    
          if(!parseInt(page)){
           return null;
          }
          getPage(page,dataList);
         }
        function getPage(pageNow,dataList){//获取指定的页面     
           scope.page.nums=dataList.length; //设置总记录数
           scope.page.now=pageNow;//设置当前是第几页
           pagination();//设置当前有多少页面 生成一个页面数组
           scope.page.orderList=getOnePage(dataList);//获取一页的数据
           scope.$emit("orderList", scope.page.orderList);//$emit:子传父,传递event与data;此处用于给父controller传递数据orderList  
        }
        
        function getOnePage(arr){//获取一页的数据
          if(arr==null){           
           return null;
          } 
          var newarr=new Array();
          if(scope.page.now<1){
            scope.page.now=1;
          }
          if(scope.page.now>scope.page.pageCount){
            scope.page.now=scope.page.pageCount;
          }
          scope.page.nowNums=scope.page.onePageNums;
          var pagenow=scope.page.now; 

          var begin=(pagenow-1)*scope.page.onePageNums;                 
          var end=begin+scope.page.onePageNums;
          var lens=scope.page.nums;

          if(end>lens){
            end=lens;
            scope.page.nowNums=lens-begin;
          }
                
          for(begin;begin<end;begin++){
            newarr.push(arr[begin]);
          }
            return newarr;
        }
        function pagination(){//设置当前有多少页面 生成一个页面数组
          if(scope.page.nums<=scope.page.onePageNums){
            scope.page.pageCount=1;
          }else{
            if(scope.page.nums%scope.page.onePageNums==0){
              scope.page.pageCount=scope.page.nums/scope.page.onePageNums;
            }else{
              scope.page.pageCount=parseInt(scope.page.nums/scope.page.onePageNums)+1;
            }
          }
        }
        
      }
    }
  });

 效果如图所示:

angular分页指令操作

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
js清理Word格式示例代码
Feb 13 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
js使用心得分享
Jan 13 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 #Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 #Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 #Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 #Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 #Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 #Javascript
详解百度百科目录导航树小插件
Jan 08 #Javascript
You might like
php ajax 静态分页过程形式
2011/09/02 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
js尾调用优化的实现
2019/05/23 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
django列表筛选功能的实现代码
2020/03/27 Python
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
文秘专业应届生求职信范文
2013/11/14 职场文书
学生实习推荐信范文
2013/11/26 职场文书
计算机软件个人的自荐信范文
2013/12/01 职场文书
百年校庆节目主持词
2014/03/27 职场文书
党支部公开承诺书
2014/03/28 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
六年级学生评语大全
2014/12/26 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python
vue实现滑动解锁功能
2022/03/03 Vue.js