angular分頁指令操作

2019-11-19 18:04:50

字體：大中小

來源：轉載

供稿：網友

目前的多個項目中都用到分頁這個功能，為了提高可復用性，我特地分離出來寫了個分頁的指令。直接貼代碼，詳情如下：

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;            }          }        }              }    }  });

效果如圖所示：