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 相关文章推荐
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
nginx部署多个vue项目的方法示例
Sep 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安全配置方法
2007/06/16 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
vue跨域解决方法
2017/10/15 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
小程序实现分类页
2019/07/12 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
Python类的继承用法示例
2019/01/31 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
python中的时区问题
2021/01/14 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
自荐信范文
2013/12/10 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
联片教研活动总结
2014/07/01 职场文书
元宵节晚会主持词
2015/07/01 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书