一、场景
二、代码
三、打印截图
四、使用Demo

一、场景

我们很多时候需要用到分页场景，但是实际的接口又没有那么多数据，此时，我们就需要写模拟分页数据。此文章就是写了一个方法 getPageData() 用来模拟返回后台的分页数据。

二、代码

<script>let page = 1; //默认第1页let pageSize = 15; //每页默认记录数15条let sizeTotal = 36; //总记录数let data = []; //最终的所有数据let pageTotal = Math.ceil(sizeTotal / pageSize); //计算总页数for (let i = 1; i <= pageTotal; i ++) {let pieceData = {id: 1, name: '名称', create_time: 'y-m-d'}; //每一条的数据let resultData = getPageData(pieceData, i, pageSize, 'name', sizeTotal);data = data.concat(resultData.data); //循环一页，追加数据到data}console.log(data); //打印 所有的数据/*** 模拟返回每一页的数据* @param pieceData 单条数据：object对象* @param page 当前页的数据* @param pageSize 每页记录数* @param nameField 需要修改的值的字段名（让我们能够区分数据变动了）* @param count 总记录数* @returns {{data: Array, count: number}} 模拟分页接口返回的结果数据*/function getPageData(pieceData, page, pageSize, nameField, count) {let pageData = []; //定义当前页数据count = count ? count : 99; //默认99条数据let name = pieceData[nameField]; //获取名称值let startNumber = (page - 1) * pageSize; //计算起始值//如果是最后一页，则pageSize的值可能小于默认值if ((page * pageSize) > count) { //如果最后一页的记录大于总页数，则需要重置pageSizepageSize = count - startNumber;}//模拟出page条数据for (let i = 1; i <= pageSize; i ++) {//给nameField加上后缀，好让我们知道数据已经变动了pieceData[nameField] = name + (startNumber+i);// console.log(pieceData[nameField]);//对象是引用类型，传递的是引用地址，所以你两个数组引用的是同一个对象，只要其中一个数组改变，就会导致对象改变，进而另一个引用的数组也会改// pageData.push(pieceData); //此种方式追加：name值异常，得用JSON.parse(JSON.stringify(pieceData))pageData.push(JSON.parse(JSON.stringify(pieceData)));// console.log(pageData);}// console.log(JSON.stringify(pageData));return {count: count, data: pageData};}
</script>

三、打印截图

四、使用Demo

小程序商品列表分页实现

Javascript分页：模拟后台返回数据方法相关推荐

js 动态生成html（js根据后台返回数据生成html页面中的table标签）（转义字符）
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...
解决通过调用后台接口实现Excel导出功能，后台返回数据乱码的问题
解决通过调用后台接口实现Excel导出功能,后台返回数据乱码的问题问题如下: 这导致我虽然成功导出文件,但文件受损打不开解决方案如下: 在调用接口加入: // 导出 export function ...
thyme leaf使用Ajax后台返回数据不能渲染
thyme leaf使用Ajax后台返回数据不能渲染问题描述:thyme leaf使用Ajax从后台请求数据,前端页面渲染时只能显示返回到字符串,而不能显示返回异步请求的页面问题原因: 问题描述: ...
ajax后台返回数据中文乱码_ajax提交返回中文乱码问题
接口返回数据相关使用@ResponseBody后返回NUll 说明:刚把后台运行起来,兴高采烈的测试接口数据,结果无论如何都是返回null, 最终通过各种百度,发现原来是没有引入关键的Jar包. 解 ...
表单和ajax中的post请求后台获取数据方法（深度好文）
最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前台主要的contenttype为下面三种:(需要注意的是请求头中data ...
后台返回数据打印是[object object]的，报错：SyntaxError: JSON.parse: expected property name or ‘}‘ at line 1 column
今天基于这个问题纠结了一下午,导致这个问题的坑也是挺深的,查找问题最好是从这条数据的存储开始查找问题1:先确定后台接收数据后存储到数据库里有没有自动转义特殊字符,比如原始数据是:[{"u ...
vue项目 - Mockjs 模拟后台接口数据
Mock 可以进行生成随机数据,模拟后端接口数据,从而实现开发时,前后端分离,提高效率. 1.安装 npm i mockjs -S or yarn add mockjs 2.引入在src文件目录下, ...
前端通过Ajax请求从后台返回数据到页面显示，实现分页功能
本文纯属自己平时编代码时的总结,主要用于自己以后方便查看后端controller代码 JsonMessage jsonMessage = new JsonMessage(); //********* ...
ajax后台返回数据中文乱码_解决Jmeter返回值显示中文乱码的三种方法及设置随机动态参数（非原创侵删）...
一.Jmeter返回值显示中文乱码解决方法第一种解决方法: 1. 点击线程组--添加--后置处理器--BeanShell后置处理程序 2.点击BeanShell后置处理程序,编写:prev.setD ...
vue mock模拟后台接口数据
vue mock 一.Json server 二.Mock 服务 1.安装 2.创建 Mock 3.main.js引入 4.组件中axure请求一.Json server 轻量级,将已有的json文 ...

Javascript分页：模拟后台返回数据方法

一、场景

二、代码

三、打印截图

四、使用Demo

Javascript分页：模拟后台返回数据方法相关推荐

最新文章

热门文章