AngularJS 前臺分頁實現

YuboonaZhang 發布于2019-08-26 11:57 / 3492人閱讀

摘要：分頁思路考評員查詢，因為整體的數據量比較小，所以我們可以將分頁放到前臺進行處理。公共方法這是最后實現的中的公共方法。對數據進行分割，數據應該是從到，加上就是之前的頁數中的數據量。

分頁思路

考評員查詢，因為整體的數據量比較小，所以我們可以將分頁放到前臺進行處理。

其實分頁的原理也很簡單，我們根據分頁選擇的頁碼數和每頁數據條數決定當前顯示的是數組中的第多少項到多少項，然后再構造分頁的參數傳入已有的分頁指令。

// 初始化分頁參數
$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，則為尾頁。

云服務器 GPU云服務器前臺分頁怎么使用前臺js分頁 js前臺分頁顯示數據無刷新 java實現前臺導入

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107899.html

AngularJS 過濾器

摘要：層過濾原來是先在層分頁，然后在層進行過濾，為了避免分頁引起的數據過濾錯誤，所以決定將過濾器放到層使用，先過濾，后分頁。畢竟中的字符串還是可以讓他人去直接粘貼然后直接查詢到這個過濾器。小數據量查詢思路考評員綜合查詢，查詢條件有：區域、所在單位、從事專業、資格證名稱、有效期至。 showImg(https://segmentfault.com/img/bVbbF1P?w=1323&h=...

BlackFlagBin 2019-08-26 11:57 評論0 收藏0
angularjs+springMvc學習筆記

摘要：回調說白了，就是把函數當參數傳給另一根函數，在另一個函數執行時調用此函數例如，在下面這段代碼中，上面定義了兩個函數和，下面的方法請求成功執行，失敗執行異步異步的原理我看了網上的一些博客和例子，大都以定時任務為例子說明，但具體的原理我還是不太回調說白了，就是把函數當參數傳給另一根函數，在另一個函數執行時調用此函數例如，在下面這段代碼中，上面定義了兩個函數success和error，下...

dreamGong 2019-08-23 11:59 評論0 收藏0
angularjs+springMvc學習筆記

摘要：回調說白了，就是把函數當參數傳給另一根函數，在另一個函數執行時調用此函數例如，在下面這段代碼中，上面定義了兩個函數和，下面的方法請求成功執行，失敗執行異步異步的原理我看了網上的一些博客和例子，大都以定時任務為例子說明，但具體的原理我還是不太回調說白了，就是把函數當參數傳給另一根函數，在另一個函數執行時調用此函數例如，在下面這段代碼中，上面定義了兩個函數success和error，下...

rozbo 2019-08-19 11:10 評論0 收藏0
DataTables后臺分頁的使用

摘要：提供了完善的前后臺分頁功能，現將后臺分頁的學習和使用過程總結如下，方便日后參考。 DataTables提供了完善的前后臺分頁功能，現將后臺分頁的學習和使用過程總結如下，方便日后參考。一、前臺頁面的配置 DataTables幾乎可以在不改變前臺代碼部分即可實現前臺分頁到后臺分頁的轉換，唯一需要做的就是在代碼中開啟DataTables后臺分頁功能即可： serverSide : true...

ChristmasBoy 2019-06-27 12:00 評論0 收藏0
用vue搭建的個人博客介紹----mapblog小站

摘要：后端主要使用的框架，數據庫采用。后臺管理登錄采用與后端進行登陸狀態的確認。本文首發于小站，這是一個積累和分享知識的個人博客這篇文章擱置了很長時間，最終決定還是把它寫出來，給剛開始學習vue并且想用vue寫個人博客的同學一個參考。因為當初我也是參考了其他人分享的知識，從一個vue小白變成了一個入門級選手，并最終完成了這個個人博客的搭建工作，代碼已托管在Github-justJokee。...

Ashin 2019-06-26 17:40 評論0 收藏0