JavaScript前端分頁(yè)實(shí)現(xiàn)示例
初窺前端分頁(yè)
前言
近日接到了一個(gè)關(guān)于前端分頁(yè)的需求,某系統(tǒng)倉(cāng)儲(chǔ)模塊的分頁(yè)功能,由于以前分頁(yè)都是后端處理的,第一次接到這種需求,借此記錄一下。
需求分析
應(yīng)用場(chǎng)景簡(jiǎn)述:在商品出庫(kù)以及退回時(shí),需要通過接口獲取商品列表,前端通過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)度,自然就不用遍歷接下來的數(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)來這里 可以看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)折:
問題到這里已經(jīng)解決了,刪除某條數(shù)據(jù)只需要將源數(shù)據(jù)的check屬性設(shè)置為false,然后重新調(diào)用方法獲取新的分頁(yè)數(shù)據(jù),提交表單的時(shí)候?qū)heck為false的數(shù)據(jù)過濾后再提交,至此也就落幕了,但在我準(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ì)于原來的方法,簡(jiǎn)潔又方便,性能損耗還沒原先的方法高,至此,代碼提交,需求落幕。
以上就是JavaScript前端分頁(yè)實(shí)現(xiàn)示例的詳細(xì)內(nèi)容,更多關(guān)于JavaScript前端分頁(yè)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
uniapp五分鐘實(shí)現(xiàn)刷抖音小程序教程示例
這篇文章主要為大家介紹了uniapp五分鐘實(shí)現(xiàn)刷抖音小程序教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03JavaScript?Canvas實(shí)現(xiàn)兼容IE的兔子發(fā)射爆破動(dòng)圖特效
這篇文章主要為大家介紹了JavaScript?Canvas實(shí)現(xiàn)兼容IE的兔子發(fā)射爆破動(dòng)圖特效示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01微信小程序本作用域下調(diào)用全局JS詳解及實(shí)例
這篇文章主要介紹了微信小程序本作用域下調(diào)用全局JS詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02javascript進(jìn)階篇深拷貝實(shí)現(xiàn)的四種方式
這篇文章主要為大家介紹了javascript進(jìn)階篇深拷貝實(shí)現(xiàn)的四種方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07微信小程序 Button 組件詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序 Button 組件詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01微信小程序 實(shí)戰(zhàn)程序簡(jiǎn)易新聞的制作
這篇文章主要介紹了微信小程序 實(shí)戰(zhàn)程序簡(jiǎn)易新聞的制作的相關(guān)資料,需要的朋友可以參考下2017-01-01