使用AngularJS怎么实现前台分页

tangjin

作者

本篇文章给大家分享的是有关使用AngularJS怎么实现前台分页，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

其实分页的原理也很简单，我们根据分页选择的页码数和每页数据条数决定当前显示的是数组中的第多少项到多少项，然后再构造分页的参数传入已有的分页指令。

//初始化分页参数
$scope.pageParams={
size:$stateParams.size,//每页数据条数
page:$stateParams.page,//页码数
last:undefined,//是否首页
first:undefined,//是否尾页
totalPages:undefined,//总页数
totalElements:undefined,//总数据条数
numberOfElements:undefined//当前页有几条数据
};

这是我们的分页指令要的数据，所以我们就是两个任务，第一，截取当前页应该显示的数据，第二生成参数传给分页指令。

这是最后实现的CommonService中的公共方法。

/**
*重新生成分页参数与分页数据
*@param{每页数据条数}size
*@param{页码数}page
*@param{全部数据}data
*@param{Function}callback
*callback(pageParams,currentPageData)
*pageParams:分页的标准
*currentPageData:当前页的数据
*/
self.reloadPageParamsAndData=function(size,page,data,callback){
//校验传入的参数
if(typeofsize==='undefined'){
throw'未接收到每页数据条数信息';
}
if(typeofpage==='undefined'){
throw'未接收到分页信息';
}
if(typeofdata==='undefined'){
throw'未接收到数据信息';
}
//计算总页数和总数据条数
vartotalPages=Math.ceil(data.length/size);
vartotalElements=data.length;
//计算当前页是否为首页是否为尾页
varfirst=page===0?true:false;
varlast=page===totalPages-1?true:false;
//根据分页参数计算当前页应该显示的数据slice数组元素分割
varcurrentPageData=data.slice(0+page*size,size+page*size);
//获取当前页总共有多少条数据
varnumberOfElements=currentPageData.length;

//重新生成分页参数
varpageParams={
size:size,//每页数据条数
page:page,//页码数
last:last,//是否首页
first:first,//是否尾页
totalPages:totalPages,//总页数
totalElements:totalElements,//总数据条数
numberOfElements:numberOfElements//当前页有几条数据
};

//回调
if(callback){
callback(pageParams,currentPageData);
}
};

获取当前页数据

获取当前页的数据，我们需要知道每页数据条数，页码数即可对数据进行分割。

varcurrentPageData=data.slice(0+page*size,size+page*size);

对数据进行分割，数据应该是从0到size，加上page * size就是之前的页数中的数据量。

构建分页参数

//计算总页数和总数据条数
vartotalPages=Math.ceil(data.length/size);
vartotalElements=data.length;
//计算当前页是否为首页是否为尾页
varfirst=page===0?true:false;
varlast=page===totalPages-1?true:false;
//获取当前页总共有多少条数据
varnumberOfElements=currentPageData.length;

数据总数除以每页数据条数向上取整得到总页数。

如果页数为0，则为首页；如果页数为总页数减1，则为尾页。

<yunzhi-pagereload="reloadByPage"total-pages="pageParams.totalPages"total-elements="pageParams.totalElements"first="pageParams.first"last="pageParams.last"number="pageParams.page"size="pageParams.size"number-of-elements="pageParams.numberOfElements"></yunzhi-page>