目前的多个项目中都用到分页这个功能,为了提高可复用性,我特地分离出来写了个分页的指令。直接贴代码,详情如下:
index.html
rush:xhtml;">
index.js
rush: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
rush: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={};//<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>对象
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page=page;
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.onePageNums=10; //每页记录数
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.nums=0;
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>=1;
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>Nums=0;
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.pageCount=1;
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.getPage=getPage; //设置<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>的ng-click
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.orderList=[];
getPage(1,s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.dataList);//初始化<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>第一页数据
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.jumpPage=function(page,dataList){
if(!parseInt(page)){
return null;
}
getPage(page,dataList);
}
function getPage(page<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>,dataList){//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>指定的<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.nums=dataList.length; //设置总记录数
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>=page<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>;//设置当前是第几页
pagination();//设置当前有多少<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a> <a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a><a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a><a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>数组
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.orderList=g<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>nePage(dataList);//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>一页的数据
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$emit("orderList",s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.orderList);//$emit:子传父,传递event与data;此处用于给父controller传递数据orderList
}
function g<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>nePage(arr){//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>一页的数据
if(arr==null){
return null;
}
var newarr=new Array();
if(s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a><1){
scope.page.now=1;
}
if(scope.page.now>s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.pageCount){
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>=s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.pageCount;
}
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>Nums=s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.onePageNums;
var page<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>=s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>;
var begin=(page<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>-1)*s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.onePageNums;
var end=begin+s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.onePageNums;
var lens=s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.nums;
if(end>lens){
end=lens;
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>Nums=lens-begin;
}
for(begin;begin<end;begin++){
newarr.push(arr[begin]);
}
return newarr;
}
function pagination(){//设置当前有多少<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a> <a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a><a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a><a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>数组
if(s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.nums<=s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.onePageNums){
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.pageCount=1;
}else{
if(s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.nums<a href="https://www.jb51.cc/tag/s/" target="_blank" class="keywords">%s</a><a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.onePageNums==0){
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.pageCount=s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.nums/s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.onePageNums;
}else{
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.pageCount=parseInt(s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.nums/s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.page.onePageNums)+1;
}
}
}
}
}
});
效果如图所示: