zoukankan      html  css  js  c++  java
  • angular分页指令

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

    index.html

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

    index.js

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

    指令模板  page.html

     1 <div>
     2   <p>
     3     <span>
     4       总记录数:<span class="rjAllNums" ng-bind="page.nums"></span>
     5       本页记录数:<span class="rjNowNums" ng-bind="page.nowNums"></span>
     6     </span>
     7     <button class="rjFirtPage" ng-click="jumpPage(1,dataList)">首页</button>
     8     <button class="rjPrePage" ng-click="jumpPage(page.now-1,dataList)">上一页</button>
     9     <span>
    10       <span class="rjNowPage" ng-bind="page.now"></span>/
    11       <span class="rjAllPage" ng-bind="page.pageCount"></span>
    12     </span>
    13     <button class="rjNextPage" ng-click="jumpPage(page.now+1,dataList)">下一页</button>
    14     <button class="rjLastPage" ng-click="jumpPage(page.pageCount,dataList)">尾页</button>
    15     到第 
    16     <input class="rjJumpInput" type="text" ng-model="page.jumpPage" name="rjPageName" value=""/>
    17 18     <button class="rjJumpBtn" ng-click="jumpPage(page.jumpPage,dataList)">确定</button>
    19   </p>
    20 
    21 </div>

     指令定义page.js

     1 app.directive('rjDate',function(){
     2         return {
     3             restrict: 'EA',   
     4             replace: false,
     5             scope : {dataList:'=datalist'},//设置scope.dataList与指令属性“datalist”值绑定,详情看指令scop作用域            
     6             templateUrl: 'pageDirective/template/page.html',   
     7             link: function(scope,elem,attr){
     8 
     9                 var page={};//分页对象
    10                 scope.page=page;
    11                 scope.page.onePageNums=10; //每页记录数
    12                 scope.page.nums=0;
    13                 scope.page.now=1;
    14                 scope.page.nowNums=0;
    15                 scope.page.pageCount=1;
    16                 scope.getPage=getPage; //设置获取页面的ng-click
    17                 scope.page.orderList=[];
    18 
    19                 getPage(1,scope.dataList);//初始化获取第一页数据
    20 
    21                 scope.jumpPage=function(page,dataList){        
    22                     if(!parseInt(page)){
    23                       return null;
    24                     }
    25                     getPage(page,dataList);
    26                   }
    27                 function getPage(pageNow,dataList){//获取指定的页面         
    28                       scope.page.nums=dataList.length; //设置总记录数
    29                       scope.page.now=pageNow;//设置当前是第几页
    30                      pagination();//设置当前有多少页面 生成一个页面数组
    31                      scope.page.orderList=getOnePage(dataList);//获取一页的数据
    32                      scope.$emit("orderList", scope.page.orderList);//$emit:子传父,传递event与data;此处用于给父controller传递数据orderList   
    33                 }
    34                 
    35                 function getOnePage(arr){//获取一页的数据
    36                     if(arr==null){                      
    37                       return null;
    38                     }  
    39                     var newarr=new Array();
    40                     if(scope.page.now<1){
    41                         scope.page.now=1;
    42                     }
    43                     if(scope.page.now>scope.page.pageCount){
    44                         scope.page.now=scope.page.pageCount;
    45                     }
    46                     scope.page.nowNums=scope.page.onePageNums;
    47                     var pagenow=scope.page.now;  
    48 
    49                     var begin=(pagenow-1)*scope.page.onePageNums;                                  
    50                     var end=begin+scope.page.onePageNums;
    51                     var lens=scope.page.nums;
    52 
    53                     if(end>lens){
    54                         end=lens;
    55                         scope.page.nowNums=lens-begin;
    56                     }
    57                                
    58                     for(begin;begin<end;begin++){
    59                         newarr.push(arr[begin]);
    60                     }
    61                         return newarr;
    62                 }
    63                 function pagination(){//设置当前有多少页面 生成一个页面数组
    64                     if(scope.page.nums<=scope.page.onePageNums){
    65                         scope.page.pageCount=1;
    66                     }else{
    67                         if(scope.page.nums%scope.page.onePageNums==0){
    68                             scope.page.pageCount=scope.page.nums/scope.page.onePageNums;
    69                         }else{
    70                             scope.page.pageCount=parseInt(scope.page.nums/scope.page.onePageNums)+1;
    71                         }
    72                     }
    73                 }
    74                 
    75             }
    76         }
    77     }); 

     效果如图所示:

  • 相关阅读:
    Construct Binary Tree from Preorder and Inorder Traversal
    Construct Binary Tree from Inorder and Postorder Traversal
    Maximum Depth of Binary Tree
    Sharepoint 2013 创建TimeJob 自动发送邮件
    IE8 不能够在Sharepoint平台上在线打开Office文档解决方案
    TFS安装与管理
    局域网通过IP查看对方计算机名,通过计算机名查看对方IP以及查看在线所有电脑IP
    JS 隐藏Sharepoint中List Item View页面的某一个字段
    SharePoint Calculated Column Formulas & Functions
    JS 两个一组数组转二维数组
  • 原文地址:https://www.cnblogs.com/huiguo/p/6262543.html
Copyright © 2011-2022 走看看