溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
目前的多個項目中都用到分頁這個功能，為了提高可復用性，我特地分離出來寫了個分頁的指令。直接貼代碼，詳情如下：
index.html
<body id="sBill" ng-controller="map_ctrl">
<table class="table table-striped" >
<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;
}
}
}
}
}
});
效果如圖所示：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
