angular分页指令操作

angular分页指令操作

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

index.html

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

总记录数：

本页记录数：

首页

上一页

/

下一页

尾页

到第

页

确定

指令定义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; //每页记录数

scoZeCAGyInnpe.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);//获取一页的数据

ZeCAGyInn 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

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;

}

}

}

}

}

});

效果如图所示：

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;

}

}

}

}

}

});

效果如图所示：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。