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 相关文章推荐
JS 遮照层实现代码
Mar 31 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
javascript的push使用指南
Dec 05 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
AngularJS语法详解
Jan 23 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 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
递归列出所有文件和目录
2006/10/09 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
python相似模块用例
2016/03/04 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python顺序执行多个py文件的方法
2019/06/29 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
final, finally, finalize的区别
2012/03/01 面试题
竞聘书格式及范文
2014/03/31 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
个人年终总结范文
2015/03/09 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
甲午风云观后感
2015/06/02 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
利用python做表格数据处理
2021/04/13 Python
Python基础之元类详解
2021/04/29 Python
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
vscode内网访问服务器的方法
2022/06/28 Servers
MySQL索引失效场景及解决方案
2022/07/23 MySQL