純JS前端分頁方法（JS分頁）

1、JS分頁函數：開發過程中，分頁功能一般是后台提供接口，前端只要傳page（當前頁碼）和pageSize（每頁最大顯示條數）及對應的其他查詢條件，就可以返回所需分頁顯示的數據。

但是有時也需要前端本地進行一些簡單的分頁處理以減輕瀏覽器渲染時的內存損耗。如后台傳回的數據條數非常多，達到幾千條甚至上萬條，但是后台又不方便分頁傳回數據，這個時候就只能前端先獲取所有數據保存下來，然后前端本地進行分頁並渲染顯示。

2、只需要一個純原生的js函數就可以實現前端的分頁功能，直接上js代碼：

/**
 * @name  getTableData
 * @desc  純JS前端分頁方法
 * @param  {Number} page 當前頁碼，默認1
 * @param  {Number} pageSize 每頁最多顯示條數，默認10
 * @param  {Array} totalData 總的數據集，默認為空數組
 * @return {Object} {
    data, //當前頁展示數據，數組
    page, //當前頁碼
    pageSize, //每頁最多顯示條數
    length, //總的數據條數
  }
**/
const getTableData = (page = 1, pageSize = 10, totalData = []) => {
  const { length } = totalData;
  const tableData = {
    data: [],
    page,
    pageSize,
    length,
  };
  if (pageSize >= length) { //pageSize大於等於總數據長度，說明只有1頁數據或沒有數據
    tableData.data = totalData;
    tableData.page = 1;//直接取第一頁
  } else { //pageSize小於總數據長度，數據多余1頁
    const num = pageSize * (page - 1);//計算當前頁（不含）之前的所有數據總條數
    if (num < length) { //如果當前頁之前所有數據總條數小於（不能等於）總的數據集長度，則說明當前頁碼沒有超出最大頁碼
      const startIndex = num;//當前頁第一條數據在總數據集中的索引
      const endIndex = num + pageSize - 1;//當前頁最后一條數據索引
      tableData.data = totalData.filter((_, index) => index >= startIndex && index <= endIndex);//當前頁數據條數小於每頁最大條數時，也按最大條數范圍篩取數據
    } else { //當前頁碼超出最大頁碼，則計算實際最后一頁的page，自動返回最后一頁數據
      const size = parseInt(length / pageSize); //取商
      const rest = length % pageSize; //取余數
      if (rest > 0) { //余數大於0，說明實際最后一頁數據不足pageSize，應該取size+1為最后一條的頁碼
        tableData.page = size + 1;//當前頁碼重置，取size+1
        tableData.data = totalData.filter((_, index) => index >= (pageSize * size) && index <= length);
      } else if (rest === 0) { //余數等於0，最后一頁數據條數正好是pageSize
        tableData.page = size;//當前頁碼重置，取size
        tableData.data = totalData.filter((_, index) => index >= (pageSize * (size - 1)) && index <= length);
      } //注：余數不可能小於0
    }
  }
  return tableData;
};

只需要傳入對應參數就可以返回帶有對應分頁屬性的對象，用於前端界面展示。

 

如有問題歡迎留言討論。

原創博客禁止抄襲，轉載請注明出處：原文地址:https://www.cnblogs.com/xiao-pengyou/