使用AngularJS怎么實現前臺分頁

本篇文章給大家分享的是有關使用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怎么實現前臺分頁，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。