后端:springboot+mybatis+pagehelper
pom.xml
<!-- 分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.1.2</version>
</dependency>
controller
注意,PageHelper的两条语句尽量紧挨着查询服务语句,否则容易报错
PageHelper.startPage(pageNum, pageSize);//新增
List<NetworkHeatmapLiveapp> list = userService.findNetworkHeatmapLiveapp(record);
PageInfo<NetworkHeatmapLiveapp> pageInfo = new PageInfo<>(list);//新增
return JSON.toJSONString(pageInfo);//将之前返回的list修改为返回pageInfo
前端
.vue
initHeatMapLiveApp () {
let pageSize = 1000;//每页1000行数据
let pageNum = 1;//第1页
let dataList = [];
this.getDataList(pageNum, pageSize,dataList);
},
//递归请求,间隔100ms
getDataList (pageNum, pageSize,dataList) {
this.$post(
url,
{
pageNum: pageNum, pageSize: pageSize },
data => {
let res = data["list"];
let pageTotal = data["pages"];
if (res.length == 0) {
return;
}
try {
let group = res.map((item) => {
return {
lng: item.longitude,
lat: item.latitude,
count: item.value
}
})
dataList=[...dataList,...group];
pageNum++;
if (pageNum <= pageTotal) {
this.heatMapCallback(dataList);//逐步渲染
setTimeout(this.getDataList(pageNum, pageSize,dataList), 100);//分页请求
} else {
return;
}
} catch (e) {
}
},
error => {
console.log(error);
}
);
},