JavaScript前端分頁(yè)實(shí)現(xiàn)代碼寫

本篇內(nèi)容介紹了“JavaScript前端分頁(yè)實(shí)現(xiàn)代碼寫”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

初窺前端分頁(yè)

需求分析

應(yīng)用場(chǎng)景簡(jiǎn)述：在商品出庫(kù)以及退回時(shí)，需要通過(guò)接口獲取商品列表，前端通過(guò)table方式展示數(shù)據(jù)，用戶多選數(shù)據(jù)提交后保存在上一級(jí)頁(yè)面的table中。

用戶選擇數(shù)據(jù)：

存儲(chǔ)用戶選擇的數(shù)據(jù)到上一頁(yè)面

實(shí)現(xiàn)目標(biāo)：

正常的用戶翻頁(yè)，用戶已經(jīng)添加的數(shù)據(jù)在翻頁(yè)時(shí)進(jìn)行操作(刪除)保證數(shù)據(jù)流正常，再次點(diǎn)擊選擇商品時(shí)正常屏蔽用戶已經(jīng)選擇的商品。

解決思路：

1.新建數(shù)組存儲(chǔ)源數(shù)據(jù)，與分頁(yè)數(shù)據(jù)隔離。

2.給源數(shù)組中的每個(gè)元素都打上一個(gè)標(biāo)志,添加sign屬性定位源數(shù)據(jù)中的數(shù)據(jù)存儲(chǔ)位置。

3.在用戶操作分頁(yè)數(shù)據(jù)時(shí)對(duì)源數(shù)組進(jìn)行相應(yīng)操作。

開工，上代碼：

封裝成一個(gè)工具函數(shù)供頁(yè)面調(diào)用

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

轉(zhuǎn)折：

問(wèn)題到這里已經(jīng)解決了，刪除某條數(shù)據(jù)只需要將源數(shù)據(jù)的check屬性設(shè)置為false，然后重新調(diào)用方法獲取新的分頁(yè)數(shù)據(jù)，提交表單的時(shí)候?qū)heck為false的數(shù)據(jù)過(guò)濾后再提交，至此也就落幕了，但在我準(zhǔn)備提交代碼的時(shí)候，腦子里突然靈光一閃，object，引用類型，貌似...，于是我又將代碼更改了一番。

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

想到引用類型，就想到了數(shù)組中每個(gè)元素存的都是這個(gè)對(duì)象的地址，而非某個(gè)具體的屬性值，只要分頁(yè)數(shù)組對(duì)應(yīng)的元素進(jìn)行了修改，源數(shù)組中相應(yīng)的對(duì)象也會(huì)相對(duì)應(yīng)的進(jìn)行修改，因?yàn)閮蓚€(gè)元素指向的都是同一個(gè)內(nèi)存地址，也就是存放具體對(duì)象的內(nèi)存地址。

而總條數(shù)直接使用源數(shù)組身上的length方法就可以獲取到了，刪除對(duì)象時(shí)先使用數(shù)組身上的indexof方法尋找到數(shù)據(jù)在源數(shù)組上存放的下標(biāo)位置，再使用splice方法將元素刪除即可，相對(duì)于原來(lái)的方法，簡(jiǎn)潔又方便，性能損耗還沒(méi)原先的方法高，至此，代碼提交，需求落幕。

“JavaScript前端分頁(yè)實(shí)現(xiàn)代碼寫”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！