JavaScript前端分頁實現(xiàn)示例
初窺前端分頁
前言
近日接到了一個關于前端分頁的需求,某系統(tǒng)倉儲模塊的分頁功能,由于以前分頁都是后端處理的,第一次接到這種需求,借此記錄一下。
需求分析
應用場景簡述:在商品出庫以及退回時,需要通過接口獲取商品列表,前端通過table方式展示數(shù)據(jù),用戶多選數(shù)據(jù)提交后保存在上一級頁面的table中。
用戶選擇數(shù)據(jù):

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

實現(xiàn)目標:
正常的用戶翻頁,用戶已經(jīng)添加的數(shù)據(jù)在翻頁時進行操作(刪除)保證數(shù)據(jù)流正常,再次點擊選擇商品時正常屏蔽用戶已經(jīng)選擇的商品。
解決思路:
1.新建數(shù)組存儲源數(shù)據(jù),與分頁數(shù)據(jù)隔離。
2.給源數(shù)組中的每個元素都打上一個標志,添加sign屬性定位源數(shù)據(jù)中的數(shù)據(jù)存儲位置。
3.在用戶操作分頁數(shù)據(jù)時對源數(shù)組進行相應操作。
開工,上代碼:
封裝成一個工具函數(shù)供頁面調(diào)用
// 前端分頁
function pageToData(sourceData,page = {pageNo: 1,pageSize: 10}) {
// 給一個page對象的默認值
let arr = [] // 返回的分頁數(shù)據(jù)數(shù)組
let num = [] // 臨時存儲分頁數(shù)據(jù)的序號
const { pageNo,pageSize } = page
for(let i = (pageNo - 1) * pageSize; i < (pageNo * pageSize) ;i++) {
num.push(i)
}
let del = 0; // 指定下一次查詢源數(shù)組數(shù)據(jù)開始的位置
sourceData.some((val,index) => { // 遍歷源數(shù)組
if(num.includes(index)){ // 數(shù)組的index是否存在于序號中
let item = index + del // 計算出真正需要取出的數(shù)據(jù)在數(shù)組中的哪個位置
if(item < sourceData.length){ // 如果超出數(shù)組長度,自然就不用遍歷接下來的數(shù)據(jù)了
let src = sourceData[item]
if(src.check) { // check是標記源數(shù)組中的數(shù)據(jù)是否為刪除狀態(tài) 也就是check = false就為假刪除
src.sign = item // 給數(shù)據(jù)源加上標記
arr.push(src) // push到要返回的分頁數(shù)組中
}else{
// 如果這條數(shù)據(jù)是刪除狀態(tà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作為標記,從源數(shù)據(jù)的哪一條開始找以idx為準,src 源數(shù)據(jù)數(shù)組
let rowData = {} // 返回的數(shù)組元素
let count = 0 // 標記循環(huán)了幾次
for(let i = idx ; i < srcData.length ; i++) {
if(srcData[i].check == true) { // 同校驗此條數(shù)據(jù)是否為正常數(shù)據(jù)
rowData = srcData[i]
rowData.sign = i
count += 1
break
}else{
count += 1
}
}
return {rowData,count}
}
// 單獨獲取數(shù)據(jù)的總數(shù)量
function getTotal(src){
let total = 0
src.map(val => {
if(val.check) {
total += 1
}
})
return total
}
export {
pageToData,
getTotal
}轉折:
問題到這里已經(jīng)解決了,刪除某條數(shù)據(jù)只需要將源數(shù)據(jù)的check屬性設置為false,然后重新調(diào)用方法獲取新的分頁數(shù)據(jù),提交表單的時候將check為false的數(shù)據(jù)過濾后再提交,至此也就落幕了,但在我準備提交代碼的時候,腦子里突然靈光一閃,object,引用類型,貌似...,于是我又將代碼更改了一番。
function pageToData(sourceData,page = {pageNo: 1,pageSize: 10}) {
// 給一個page對象的默認值
let arr = [] // 返回的分頁數(shù)據(jù)數(shù)組
const { pageNo,pageSize } = page
for(let i = (pageNo - 1) * pageSize; i < (pageNo * pageSize) ;i++) {
arr.push(souceData[i])
}
return arr;
}想到引用類型,就想到了數(shù)組中每個元素存的都是這個對象的地址,而非某個具體的屬性值,只要分頁數(shù)組對應的元素進行了修改,源數(shù)組中相應的對象也會相對應的進行修改,因為兩個元素指向的都是同一個內(nèi)存地址,也就是存放具體對象的內(nèi)存地址。
而總條數(shù)直接使用源數(shù)組身上的length方法就可以獲取到了,刪除對象時先使用數(shù)組身上的indexof方法尋找到數(shù)據(jù)在源數(shù)組上存放的下標位置,再使用splice方法將元素刪除即可,相對于原來的方法,簡潔又方便,性能損耗還沒原先的方法高,至此,代碼提交,需求落幕。
以上就是JavaScript前端分頁實現(xiàn)示例的詳細內(nèi)容,更多關于JavaScript前端分頁的資料請關注腳本之家其它相關文章!
相關文章
JavaScript?Canvas實現(xiàn)兼容IE的兔子發(fā)射爆破動圖特效
這篇文章主要為大家介紹了JavaScript?Canvas實現(xiàn)兼容IE的兔子發(fā)射爆破動圖特效示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01

