使用vue分页,每次换页都调用接口,后端每次返回该页的数据,但是切换分页的时候出现携带input框参数,实际应该在原来的数据进行分页,有什么解决方案
时间: 2023-08-06 21:04:56 浏览: 106
您可以在前端使用一个变量来存储搜索框中的参数,然后在切换分页时将该参数一并发送给后端,让后端将该参数结合原始数据进行分页,再返回该页的数据。
具体实现方式如下:
1. 在前端定义一个变量 `searchParam` 来存储搜索框中的参数,初始值为 `''`。
2. 在分页切换时,将 `searchParam` 一并发送给后端,例如:
```javascript
// 假设当前页为 page,每页大小为 size,搜索参数为 searchParam
axios.get('/api/data', {
params: {
page: page,
size: size,
search: searchParam
}
}).then(res => {
// 处理返回的数据
})
```
3. 在后端接口中,先根据 `searchParam` 进行筛选,然后再对筛选后的数据进行分页,例如:
```python
def get_data(page, size, search):
# 获取原始数据
data = get_raw_data()
# 如果有搜索参数,则筛选数据
if search:
data = filter_data(data, search)
# 计算起始索引和结束索引
start = (page - 1) * size
end = start + size
# 对数据进行分页
page_data = data[start:end]
# 返回分页数据
return page_data
```
通过这种方式,即可实现在切换分页时携带搜索参数,并在原始数据的基础上进行分页的功能。
阅读全文