JavaScript前端分頁實現示例

Posted on by

初窺前端分頁

前言

近日接到瞭一個關於前端分頁的需求，某系統倉儲模塊的分頁功能，由於以前分頁都是後端處理的，第一次接到這種需求，借此記錄一下。

需求分析

應用場景簡述：在商品出庫以及退回時，需要通過接口獲取商品列表，前端通過table方式展示數據，用戶多選數據提交後保存在上一級頁面的table中。

用戶選擇數據：

存儲用戶選擇的數據到上一頁面

實現目標：

正常的用戶翻頁，用戶已經添加的數據在翻頁時進行操作(刪除)保證數據流正常，再次點擊選擇商品時正常屏蔽用戶已經選擇的商品。

解決思路：

1.新建數組存儲源數據，與分頁數據隔離。

2.給源數組中的每個元素都打上一個標志,添加sign屬性定位源數據中的數據存儲位置。

3.在用戶操作分頁數據時對源數組進行相應操作。

開工，上代碼：

封裝成一個工具函數供頁面調用

//  前端分頁
function pageToData(sourceData,page = {pageNo: 1,pageSize: 10}) {
  //    給一個page對象的默認值
  let arr = []  //  返回的分頁數據數組
  let num = []  //  臨時存儲分頁數據的序號
  const { pageNo,pageSize } = page
  for(let i = (pageNo - 1) * pageSize; i < (pageNo * pageSize) ;i++) {
    num.push(i)
  } 
  let del = 0;  //  指定下一次查詢源數組數據開始的位置
  sourceData.some((val,index) => {  //  遍歷源數組
    if(num.includes(index)){    //  數組的index是否存在於序號中
      let item = index + del    //  計算出真正需要取出的數據在數組中的哪個位置
      if(item < sourceData.length){     //  如果超出數組長度,自然就不用遍歷接下來的數據瞭
        let src = sourceData[item]
          if(src.check) {   //  check是標記源數組中的數據是否為刪除狀態 也就是check = false就為假刪除
            src.sign = item     //  給數據源加上標記
            arr.push(src)   //  push到要返回的分頁數組中
          }else{
            //  如果這條數據是刪除狀態則進來這裡 可以看findData函數
            let { rowData,count } = findData(item + 1,sourceData);
            JSON.stringify(rowData) === "{}" ? '' : arr.push(rowData)
          }
      }else{
        return true
      }
    }
  })
  return arr; 
}
  function findData(idx,srcData){   //  idx作為標記，從源數據的哪一條開始找以idx為準,src 源數據數組
    let rowData = {}    //  返回的數組元素
    let count = 0   //  標記循環瞭幾次
    for(let i = idx ; i < srcData.length ; i++) {
      if(srcData[i].check == true) {    //  同校驗此條數據是否為正常數據
        rowData = srcData[i]
        rowData.sign = i
        count += 1
        break
      }else{
        count += 1
      }
    }
    return {rowData,count}
  }
//  單獨獲取數據的總數量
  function getTotal(src){
    let total = 0
    src.map(val => {
      if(val.check) {
        total += 1
      }
    })
    return total
  }
export {
  pageToData,
  getTotal
}

轉折：

問題到這裡已經解決瞭，刪除某條數據隻需要將源數據的check屬性設置為false，然後重新調用方法獲取新的分頁數據，提交表單的時候將check為false的數據過濾後再提交，至此也就落幕瞭，但在我準備提交代碼的時候，腦子裡突然靈光一閃，object，引用類型，貌似…，於是我又將代碼更改瞭一番。

function pageToData(sourceData,page = {pageNo: 1,pageSize: 10}) {
  //    給一個page對象的默認值
  let arr = []  //  返回的分頁數據數組
  const { pageNo,pageSize } = page
  for(let i = (pageNo - 1) * pageSize; i < (pageNo * pageSize) ;i++) {
    arr.push(souceData[i])
  } 
  return arr; 
}

想到引用類型，就想到瞭數組中每個元素存的都是這個對象的地址，而非某個具體的屬性值，隻要分頁數組對應的元素進行瞭修改，源數組中相應的對象也會相對應的進行修改，因為兩個元素指向的都是同一個內存地址，也就是存放具體對象的內存地址。

而總條數直接使用源數組身上的length方法就可以獲取到瞭，刪除對象時先使用數組身上的indexof方法尋找到數據在源數組上存放的下標位置，再使用splice方法將元素刪除即可，相對於原來的方法，簡潔又方便，性能損耗還沒原先的方法高，至此，代碼提交，需求落幕。

以上就是JavaScript前端分頁實現示例的詳細內容，更多關於JavaScript前端分頁的資料請關註WalkonNet其它相關文章！

推薦閱讀：