如何用JavaScript实现前端长尾词分页功能？

本文共计1205个文字，预计阅读时间需要5分钟。

目录+前端分页+前言+需求分析+实现目标：+解决方案：+开工，当代代码：+转换：+初前端分页+前言+近期接到了一个关于前端分页的需求，涉及某系统存储模块的分页功能。由于之前未涉及分页，需要学习并实现。

目录

• 初窥前端分页
• 前言
• 需求分析
• 实现目标：
• 解决思路：
• 开工，上代码：
• 转折：

初窥前端分页

前言

近日接到了一个关于前端分页的需求，某系统仓储模块的分页功能，由于以前分页都是后端处理的，第一次接到这种需求，借此记录一下。

需求分析

应用场景简述：在商品出库以及退回时，需要通过接口获取商品列表，前端通过table方式展示数据，用户多选数据提交后保存在上一级页面的table中。

用户选择数据：

存储用户选择的数据到上一页面

实现目标：

正常的用户翻页，用户已经添加的数据在翻页时进行操作(删除)保证数据流正常，再次点击选择商品时正常屏蔽用户已经选择的商品。

解决思路：

1.新建数组存储源数据，与分页数据隔离。

2.给源数组中的每个元素都打上一个标志,添加sign属性定位源数据中的数据存储位置。

3.在用户操作分页数据时对源数组进行相应操作。