本篇文章给大家分享的是有关使用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 (typeof size === 'undefined') {
throw '未接收到每页数据条数信息';
}
if (typeof page === 'undefined') {
throw '未接收到分页信息';
}
if (typeof data === 'undefined') {
throw '未接收到数据信息';
}
// 计算总页数和总数据条数
var totalPages = Math.ceil(data.length / size);
var totalElements = data.length;
// 计算当前页是否为首页 是否为尾页
var first = page === 0 ? true : false;
var last = page === totalPages - 1 ? true : false;
// 根据分页参数计算当前页应该显示的数据 slice数组元素分割
var currentPageData = data.slice(0 + page * size, size + page * size);
// 获取当前页总共有多少条数据
var numberOfElements = currentPageData.length;
// 重新生成分页参数
var pageParams = {
size: size, // 每页数据条数
page: page, // 页码数
last: last, // 是否首页
first: first, // 是否尾页
totalPages: totalPages, // 总页数
totalElements: totalElements, // 总数据条数
numberOfElements: numberOfElements // 当前页有几条数据
};
// 回调
if (callback) {
callback(pageParams, currentPageData);
}
};获取当前页数据
获取当前页的数据，我们需要知道每页数据条数，页码数即可对数据进行分割。
var currentPageData = data.slice(0 + page * size, size + page * size);对数据进行分割，数据应该是从0到size，加上page * size就是之前的页数中的数据量。
构建分页参数
// 计算总页数和总数据条数
var totalPages = Math.ceil(data.length / size);
var totalElements = data.length;
// 计算当前页是否为首页 是否为尾页
var first = page === 0 ? true : false;
var last = page === totalPages - 1 ? true : false;
// 获取当前页总共有多少条数据
var numberOfElements = currentPageData.length;数据总数除以每页数据条数向上取整得到总页数。
如果页数为0，则为首页；如果页数为总页数减1，则为尾页。
<yunzhi-page reload="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>
以上就是使用AngularJS怎么实现前台分页，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
