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

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

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

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

 1 /**
 2  * @name  getTableData
 3  * @desc  純JS前端分頁方法
 4  * @param  {Number} page 當前頁碼，默認1
 5  * @param  {Number} pageSize 每頁最多顯示條數，默認10
 6  * @param  {Array} totalData 總的數據集，默認爲空數組
 7  * @return {Object} {
 8     data, //當前頁展現數據，數組
 9     page, //當前頁碼
10     pageSize, //每頁最多顯示條數
11     length, //總的數據條數
12   }
13 **/
14 const getTableData = (page = 1, pageSize = 10, totalData = []) => {
15   const { length } = totalData;
16   const tableData = {
17     data: [],
18     page,
19     pageSize,
20     length,
21   };
22   if (pageSize >= length) { //pageSize大於等於總數據長度，說明只有1頁數據或沒有數據
23     tableData.data = totalData;
24     tableData.page = 1;//直接取第一頁
25   } else { //pageSize小於總數據長度，數據多餘1頁
26     const num = pageSize * (page - 1);//計算當前頁（不含）以前的全部數據總條數
27     if (num < length) { //若是當前頁以前全部數據總條數小於（不能等於）總的數據集長度，則說明當前頁碼沒有超出最大頁碼
28       const startIndex = num;//當前頁第一條數據在總數據集中的索引
29       const endIndex = num + pageSize - 1;//當前頁最後一條數據索引
30       tableData.data = totalData.filter((_, index) => index >= startIndex && index <= endIndex);//當前頁數據條數小於每頁最大條數時，也按最大條數範圍篩取數據
31     } else { //當前頁碼超出最大頁碼，則計算實際最後一頁的page，自動返回最後一頁數據
32       const size = parseInt(length / pageSize); //取商
33       const rest = length % pageSize; //取餘數
34       if (rest > 0) { //餘數大於0，說明實際最後一頁數據不足pageSize，應該取size+1爲最後一條的頁碼
35         tableData.page = size + 1;//當前頁碼重置，取size+1
36         tableData.data = totalData.filter((_, index) => index >= (pageSize * size) && index <= length);
37       } else if (rest === 0) { //餘數等於0，最後一頁數據條數正好是pageSize
38         tableData.page = size;//當前頁碼重置，取size
39         tableData.data = totalData.filter((_, index) => index >= (pageSize * (size - 1)) && index <= length);
40       } //注：餘數不可能小於0
41     }
42   }
43   return tableData;
44 };

只須要傳入對應參數就能夠返回帶有對應分頁屬性的對象，用於前端界面展現。

 

若有問題歡迎留言討論。

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