您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)使用AngularJS怎么實(shí)現(xiàn)前臺分頁,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
其實(shí)分頁的原理也很簡單,我們根據(jù)分頁選擇的頁碼數(shù)和每頁數(shù)據(jù)條數(shù)決定當(dāng)前顯示的是數(shù)組中的第多少項(xiàng)到多少項(xiàng),然后再構(gòu)造分頁的參數(shù)傳入已有的分頁指令。
// 初始化分頁參數(shù) $scope.pageParams = { size: $stateParams.size, // 每頁數(shù)據(jù)條數(shù) page: $stateParams.page, // 頁碼數(shù) last: undefined, // 是否首頁 first: undefined, // 是否尾頁 totalPages: undefined, // 總頁數(shù) totalElements: undefined, // 總數(shù)據(jù)條數(shù) numberOfElements: undefined // 當(dāng)前頁有幾條數(shù)據(jù) };
這是我們的分頁指令要的數(shù)據(jù),所以我們就是兩個(gè)任務(wù),第一,截取當(dāng)前頁應(yīng)該顯示的數(shù)據(jù),第二生成參數(shù)傳給分頁指令。
這是最后實(shí)現(xiàn)的CommonService
中的公共方法。
/** * 重新生成分頁參數(shù)與分頁數(shù)據(jù) * @param {每頁數(shù)據(jù)條數(shù)} size * @param {頁碼數(shù)} page * @param {全部數(shù)據(jù)} data * @param {Function} callback * callback (pageParams, currentPageData) * pageParams: 分頁的標(biāo)準(zhǔn) * currentPageData: 當(dāng)前頁的數(shù)據(jù) */ self.reloadPageParamsAndData = function(size, page, data, callback) { // 校驗(yàn)傳入的參數(shù) if (typeof size === 'undefined') { throw '未接收到每頁數(shù)據(jù)條數(shù)信息'; } if (typeof page === 'undefined') { throw '未接收到分頁信息'; } if (typeof data === 'undefined') { throw '未接收到數(shù)據(jù)信息'; } // 計(jì)算總頁數(shù)和總數(shù)據(jù)條數(shù) var totalPages = Math.ceil(data.length / size); var totalElements = data.length; // 計(jì)算當(dāng)前頁是否為首頁 是否為尾頁 var first = page === 0 ? true : false; var last = page === totalPages - 1 ? true : false; // 根據(jù)分頁參數(shù)計(jì)算當(dāng)前頁應(yīng)該顯示的數(shù)據(jù) slice數(shù)組元素分割 var currentPageData = data.slice(0 + page * size, size + page * size); // 獲取當(dāng)前頁總共有多少條數(shù)據(jù) var numberOfElements = currentPageData.length; // 重新生成分頁參數(shù) var pageParams = { size: size, // 每頁數(shù)據(jù)條數(shù) page: page, // 頁碼數(shù) last: last, // 是否首頁 first: first, // 是否尾頁 totalPages: totalPages, // 總頁數(shù) totalElements: totalElements, // 總數(shù)據(jù)條數(shù) numberOfElements: numberOfElements // 當(dāng)前頁有幾條數(shù)據(jù) }; // 回調(diào) if (callback) { callback(pageParams, currentPageData); } };
獲取當(dāng)前頁數(shù)據(jù)
獲取當(dāng)前頁的數(shù)據(jù),我們需要知道每頁數(shù)據(jù)條數(shù),頁碼數(shù)即可對數(shù)據(jù)進(jìn)行分割。
var currentPageData = data.slice(0 + page * size, size + page * size);
對數(shù)據(jù)進(jìn)行分割,數(shù)據(jù)應(yīng)該是從0
到size
,加上page * size
就是之前的頁數(shù)中的數(shù)據(jù)量。
構(gòu)建分頁參數(shù)
// 計(jì)算總頁數(shù)和總數(shù)據(jù)條數(shù) var totalPages = Math.ceil(data.length / size); var totalElements = data.length; // 計(jì)算當(dāng)前頁是否為首頁 是否為尾頁 var first = page === 0 ? true : false; var last = page === totalPages - 1 ? true : false; // 獲取當(dāng)前頁總共有多少條數(shù)據(jù) var numberOfElements = currentPageData.length;
數(shù)據(jù)總數(shù)除以每頁數(shù)據(jù)條數(shù)向上取整得到總頁數(shù)。
如果頁數(shù)為0
,則為首頁;如果頁數(shù)為總頁數(shù)減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怎么實(shí)現(xiàn)前臺分頁,小編相信有部分知識點(diǎn)可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。