AngularJS 前臺(tái)分頁(yè)實(shí)現(xiàn)的示例代碼
考評(píng)員查詢,因?yàn)檎w的數(shù)據(jù)量比較小,所以我們可以將分頁(yè)放到前臺(tái)進(jìn)行處理。
其實(shí)分頁(yè)的原理也很簡(jiǎn)單,我們根據(jù)分頁(yè)選擇的頁(yè)碼數(shù)和每頁(yè)數(shù)據(jù)條數(shù)決定當(dāng)前顯示的是數(shù)組中的第多少項(xiàng)到多少項(xiàng),然后再構(gòu)造分頁(yè)的參數(shù)傳入已有的分頁(yè)指令。
// 初始化分頁(yè)參數(shù)
$scope.pageParams = {
size: $stateParams.size, // 每頁(yè)數(shù)據(jù)條數(shù)
page: $stateParams.page, // 頁(yè)碼數(shù)
last: undefined, // 是否首頁(yè)
first: undefined, // 是否尾頁(yè)
totalPages: undefined, // 總頁(yè)數(shù)
totalElements: undefined, // 總數(shù)據(jù)條數(shù)
numberOfElements: undefined // 當(dāng)前頁(yè)有幾條數(shù)據(jù)
};
這是我們的分頁(yè)指令要的數(shù)據(jù),所以我們就是兩個(gè)任務(wù),第一,截取當(dāng)前頁(yè)應(yīng)該顯示的數(shù)據(jù),第二生成參數(shù)傳給分頁(yè)指令。
這是最后實(shí)現(xiàn)的CommonService中的公共方法。
/**
* 重新生成分頁(yè)參數(shù)與分頁(yè)數(shù)據(jù)
* @param {每頁(yè)數(shù)據(jù)條數(shù)} size
* @param {頁(yè)碼數(shù)} page
* @param {全部數(shù)據(jù)} data
* @param {Function} callback
* callback (pageParams, currentPageData)
* pageParams: 分頁(yè)的標(biāo)準(zhǔn)
* currentPageData: 當(dāng)前頁(yè)的數(shù)據(jù)
*/
self.reloadPageParamsAndData = function(size, page, data, callback) {
// 校驗(yàn)傳入的參數(shù)
if (typeof size === 'undefined') {
throw '未接收到每頁(yè)數(shù)據(jù)條數(shù)信息';
}
if (typeof page === 'undefined') {
throw '未接收到分頁(yè)信息';
}
if (typeof data === 'undefined') {
throw '未接收到數(shù)據(jù)信息';
}
// 計(jì)算總頁(yè)數(shù)和總數(shù)據(jù)條數(shù)
var totalPages = Math.ceil(data.length / size);
var totalElements = data.length;
// 計(jì)算當(dāng)前頁(yè)是否為首頁(yè) 是否為尾頁(yè)
var first = page === 0 ? true : false;
var last = page === totalPages - 1 ? true : false;
// 根據(jù)分頁(yè)參數(shù)計(jì)算當(dāng)前頁(yè)應(yīng)該顯示的數(shù)據(jù) slice數(shù)組元素分割
var currentPageData = data.slice(0 + page * size, size + page * size);
// 獲取當(dāng)前頁(yè)總共有多少條數(shù)據(jù)
var numberOfElements = currentPageData.length;
// 重新生成分頁(yè)參數(shù)
var pageParams = {
size: size, // 每頁(yè)數(shù)據(jù)條數(shù)
page: page, // 頁(yè)碼數(shù)
last: last, // 是否首頁(yè)
first: first, // 是否尾頁(yè)
totalPages: totalPages, // 總頁(yè)數(shù)
totalElements: totalElements, // 總數(shù)據(jù)條數(shù)
numberOfElements: numberOfElements // 當(dāng)前頁(yè)有幾條數(shù)據(jù)
};
// 回調(diào)
if (callback) {
callback(pageParams, currentPageData);
}
};
獲取當(dāng)前頁(yè)數(shù)據(jù)
獲取當(dāng)前頁(yè)的數(shù)據(jù),我們需要知道每頁(yè)數(shù)據(jù)條數(shù),頁(yè)碼數(shù)即可對(duì)數(shù)據(jù)進(jìn)行分割。
var currentPageData = data.slice(0 + page * size, size + page * size);
對(duì)數(shù)據(jù)進(jìn)行分割,數(shù)據(jù)應(yīng)該是從0到size,加上page * size就是之前的頁(yè)數(shù)中的數(shù)據(jù)量。
構(gòu)建分頁(yè)參數(shù)
// 計(jì)算總頁(yè)數(shù)和總數(shù)據(jù)條數(shù) var totalPages = Math.ceil(data.length / size); var totalElements = data.length; // 計(jì)算當(dāng)前頁(yè)是否為首頁(yè) 是否為尾頁(yè) var first = page === 0 ? true : false; var last = page === totalPages - 1 ? true : false; // 獲取當(dāng)前頁(yè)總共有多少條數(shù)據(jù) var numberOfElements = currentPageData.length;
數(shù)據(jù)總數(shù)除以每頁(yè)數(shù)據(jù)條數(shù)向上取整得到總頁(yè)數(shù)。
如果頁(yè)數(shù)為0,則為首頁(yè);如果頁(yè)數(shù)為總頁(yè)數(shù)減1,則為尾頁(yè)。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- AngularJS與BootStrap模仿百度分頁(yè)的示例代碼
- angularjs實(shí)現(xiàn)分頁(yè)和搜索功能
- Angularjs自定義指令實(shí)現(xiàn)分頁(yè)插件(DEMO)
- angularjs+bootstrap實(shí)現(xiàn)自定義分頁(yè)的實(shí)例代碼
- AngularJS自定義指令詳解(有分頁(yè)插件代碼)
- Angularjs分頁(yè)查詢的實(shí)現(xiàn)
- angularjs實(shí)現(xiàn)的前端分頁(yè)控件示例
- 詳解angularjs結(jié)合pagination插件實(shí)現(xiàn)分頁(yè)功能
- angularjs使用directive實(shí)現(xiàn)分頁(yè)組件的示例
相關(guān)文章
用angular實(shí)現(xiàn)多選按鈕的全選與反選實(shí)例代碼
本篇文章主要介紹了用angular實(shí)現(xiàn)多選按鈕的全選與反選實(shí)例代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-05-05
angular.js指令中transclude選項(xiàng)及ng-transclude指令詳解
這篇文章主要研究一下如何使用ng-transclude指令,以及指令的transclude選項(xiàng)的相關(guān)資料,文中介紹的非常詳細(xì),并給出了完整的示例代碼大家參考學(xué)習(xí),需要的朋友們下面來(lái)一起看看吧。2017-05-05
Angular6使用forRoot() 注冊(cè)單一實(shí)例服務(wù)問(wèn)題
這篇文章主要介紹了Angular6使用forRoot() 注冊(cè)單一實(shí)例服務(wù)問(wèn)題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
詳解基于Angular4+ server render(服務(wù)端渲染)開(kāi)發(fā)教程
本篇文章主要介紹了詳解基于Angular4+ server render(服務(wù)端渲染)開(kāi)發(fā)教程 ,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08
利用Angularjs中模塊ui-route管理狀態(tài)的方法
這篇文章主要給大家介紹了如何用Angularjs中的模板ui-route來(lái)管理狀態(tài)的方法,文中通過(guò)示例代碼介紹的很詳細(xì),相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值,有需要的朋友可以一起來(lái)學(xué)習(xí)學(xué)習(xí)。2016-12-12
AngularJS學(xué)習(xí)筆記之ng-options指令
ng-options是angular-1.3新出的一個(gè)指令,這篇文章就來(lái)介紹這個(gè)指令的用法.有需要的小伙伴可以參考下。2015-06-06
Angular客戶端請(qǐng)求Rest服務(wù)跨域問(wèn)題的解決方法
本篇文章主要介紹了Angular客戶端請(qǐng)求Rest服務(wù)跨域問(wèn)題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09
詳細(xì)介紹RxJS在Angular中的應(yīng)用
本篇文章主要介紹了詳細(xì)介紹RxJS在Angular中的應(yīng)用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09

