JavaScript前端分頁實現範例

2022-07-19 22:01:48

初窺前端分頁

前言

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

需求分析

應用場景簡述：在商品出庫以及退回時，需要通過介面獲取商品列表，前端通過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前端分頁的資料請關注it145.com其它相關文章！