AngularJS前台分页实现的示例代码

考核人询问，因为整体数据量小，所以我们可以把分页放在前台进行处理。

其实分页的原理也很简单。根据页数和每页的数据量，我们决定当前显示数组中的哪些项，然后构造分页参数并传递到现有的分页指令中。

//初始化分页参数$ scope . pageparams={ size: $ state params . size，//页码页3360 $ stateparams.page，//页码last: undefined，//第一页first: undefined，//最后一页totalPages: undefined，//总页数totalElements: undefined，//元素的数据总数： undefined//当前页中有多条数据}；这是我们的分页指令需要的数据，所以我们有两个任务：第一，截取应该显示在当前页面上的数据，第二，将生成的参数传递给分页指令。

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

/* * *重新生成分页参数和分页数据* @ param {每页数据数}大小* @ param {页码数}页* @ param {所有数据}数据* @ param {function}回调*回调(page params，CurrentPageData)* page params : page page data: page data */self。reloadPagePagePageransandData=function(size，page，Data，Callback) {//如果(size的类型==' undefined') {throw '未收到每页的数据数'，请验证传入的参数'；} if(page的类型===' undefined') {throw '未收到分页信息'；} if(数据类型===' undefined') {throw '未收到数据信息'；}//计算页面和数据的总数。var总页数=math . ceil(data . length/size)；var totalElements=data.length//计算当前页面是第一页还是最后一页var first=page===0？真：假；var last=page===totalPages - 1？真：假；//根据分页参数计算当前页面应该显示的数据切片数组元素分区。var current page data=data . slice(0 page * size，sizepage * size)；//获取当前页面中数据的总个数var元素个数=currentpagedata.length//重新生成分页参数var page params={size : size，//页码page3360 page，//页码last3360 last，//第一页页码first: first，//是最后一页totalPages: totalPages，//total pages total elements : total elements，//元素的总数据个数：元素个数//当前页面上有多条数据}；//回调if(callback){ callback(page params，currentpagedata)；}};获取当前页面数据

为了得到当前页面的数据，我们需要知道每页的数据量和页码数来划分数据。

var currentPageData=data . slice(0页*大小，大小页*大小)；要划分数据，数据应该从0到大小，加上page * size就是前几页的数据量。

构建分页参数

//计算页面和数据的总数。var总页数=math . ceil(data . length/size)；var totalElements=data.length//计算当前页面是第一页还是最后一页var first=page===0？真：假；var last=page===totalPages - 1？真：假；//获取当前页面中数据的总个数var元素个数=currentpagedata.length数据的总数除以每页的数据数，取整得到总页数。

如果页数为0，则为第一页；如果页数是总页数减1，那就是最后一页。

复制代码如下：云志-page reload=' reload by page ' total-pages=' page params . total pages ' total-elements=' page params . total elements ' first=' page params . first ' last=' page params . last ' number=' page params . page ' size=' page params . size '元素个数=' page params . numberofelements '/云志-page

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。