遇到表格,手动翻页太麻烦?我教你写脚本,一页展示所有数据

简介: 看到这篇文章的人,想必都是互联网用户吧。你们一定遇到过「表格」。我们在阅读表格时,可能有这种困惑:表格不支持关键词搜索表格不支持按照某列排序表格每页只能展示10条数据,需要不断翻页,才能看完所有内容怎么办呢?如果表格一页能展示所有数据就好了!

互联网用户的困惑
看到这篇文章的人,想必都是互联网用户吧。你们一定遇到过「表格」。
我们在阅读表格时,可能有这种困惑:

表格不支持关键词搜索
表格不支持按照某列排序
表格每页只能展示10条数据,需要不断翻页,才能看完所有内容

怎么办呢?
如果表格一页能展示所有数据就好了!
这样的话:

关键词搜索可以通过浏览器的「搜索」功能实现(Ctrl+F或Command+F)。
排序可以参照我下一篇文章实现(敬请期待)。
不再需要手动翻页了。

接下来,让我HullQin来给你提供一种解决办法,让表格能一页展示所有数据!
解决方案

我们发现,这个叫做list_by_user的API,是后端的分页API。
我们只要遍历请求它,就可以拿到表格所有的数据,之后让前端一次性展示出来就可以了~
这里有2个问题需要解决:

我要按页循环请求接口,从而获取表格所有的数据。
我要让前端的掘金代码请求时,只请求1次,就获得所有的数据。这样可以一次性展示。

解决第1个问题:获取所有数据
我们打开浏览器的开发者工具,打开Network(网络)面板,发现了这个叫做list_by_user的API,返回了表格的所需数据。
我们需要修改它的page_no参数,然后遍历多次,一直请求这个接口,直至最后一页。
Chrome最方便的一点是,可以直接Copy as fetch,点击后,就可以复制这个请求的fetch版本,做「重放攻击」也太方便啦,Chrome的贴心功能真是太刑啦!

当然以上的「重放攻击」都要打引号,其实不算重放攻击,只是我们多做了一次查询,它并没有改变后端的数据状态。
下面,改一下fetch函数,我们需要保存它的结果。
这个API的返回结果是这样的:

我们最终目的是,把data里的数据都整合进同一个数组中。
const result = [];
const res = await fetch('...你复制的内容');
const data = await res.json();
result.push(...data.data);
复制代码

接下来,我们给上面的逻辑加上for循环实现分页获取:
const result = [];
// 不能给掘金太大压力,我们定义个sleep函数,1秒请求一次就好
const sleep = async () => new Promise(resolve => setTimeout(resolve, 1000));
for (let i = 1; i <= 2; i++) { // 注意这里需要把i的最大值改下,看看你需要几次才能下载完所有数据。
const res = await fetch("https://api.juejin.cn/content_api/v1/article/list_by_user?修改成你的参数!", {

"headers": { "content-type": "application/json" },
"body": "{\"page_size\":10,\"page_no\":" + i + ",\"audit_status\":null}",
"method": "POST",
"mode": "cors",
"credentials": "include",

});
const data = await res.json();
result.push(...data.data);
await sleep(); // 不能给掘金太大压力,我们1秒请求一次就好
}
复制代码

现在,result就是我们表格中的所有数据了!

相关文章
|
4月前
|
JSON JavaScript 数据格式
团队筛选功能,上一页,下一页,数字按钮省略
团队筛选功能,上一页,下一页,数字按钮省略
35 0
|
5月前
|
开发者
无法拖拽选中文字的在线电子书的做笔记方法 —— html文本提取大法
无法拖拽选中文字的在线电子书的做笔记方法 —— html文本提取大法
39 0
|
7月前
publiccms中将推荐页的内容显示在页面片段中
publiccms中将推荐页的内容显示在页面片段中
|
7月前
|
测试技术
【sgTransfer】自定义组件:带有翻页、页码、分页器的穿梭框组件,支持大批量数据的穿梭显示。
【sgTransfer】自定义组件:带有翻页、页码、分页器的穿梭框组件,支持大批量数据的穿梭显示。
鼠标可控的表格滑动(左右)demo效果示例(整理)
鼠标可控的表格滑动(左右)demo效果示例(整理)
|
JavaScript 容器
rAF实现表格内容自动滚动
rAF实现表格内容自动滚动
325 1
|
JavaScript
vue再读48-表格案例-搜索按钮实现功能
vue再读48-表格案例-搜索按钮实现功能
195 0
vue再读48-表格案例-搜索按钮实现功能
|
JavaScript
问题解决:使用JqGrid实现列表分页,翻页图标无法显示
问题解决:使用JqGrid实现列表分页,翻页图标无法显示
312 0
问题解决:使用JqGrid实现列表分页,翻页图标无法显示
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法
遇到表格,手动翻页太麻烦?我教你写脚本,一页展示所有数据
看到这篇文章的人,想必都是互联网用户吧。你们一定遇到过「表格」。 我们在阅读表格时,可能有这种困惑: 表格不支持关键词搜索 表格不支持按照某列排序 表格每页只能展示10条数据,需要不断翻页,才能看完所有内容 怎么办呢? 如果表格一页能展示所有数据就好了!
120 0