若依框架下 列表中进行搜索查询数据,点击数据进入详情,实现在回到列表时依然是之前搜索的条件以及相应数据 代码
时间: 2024-06-04 15:12:22 浏览: 8
这个功能可以通过以下步骤实现:
1. 在列表页面中添加搜索框和搜索按钮,并绑定搜索事件。
2. 在搜索事件中,将搜索条件保存到本地存储中,例如使用localStorage.setItem(key, value)。
3. 在查询数据时,首先判断本地存储中是否有搜索条件,如果有,则将搜索条件作为查询参数发送给后台,否则查询所有数据。
4. 在列表页面中,将每条数据的详情页面链接中添加搜索条件,例如使用链接参数的方式传递搜索条件,例如:/detail?id=1&keyword=xxx。
5. 在详情页面中,可以通过获取链接中的参数,将搜索条件保存到本地存储中。
6. 在返回列表页面时,判断本地存储中是否有搜索条件,如果有,则根据搜索条件重新查询数据并展示,否则展示所有数据。
以下是示例代码:
// 列表页面
// 绑定搜索事件
$('#searchBtn').on('click', function() {
// 获取搜索条件
var keyword = $('#keyword').val();
// 保存搜索条件到本地存储中
localStorage.setItem('searchKeyword', keyword);
// 发送查询请求
$.ajax({
url: '/api/list',
data: {
keyword: keyword
},
success: function(data) {
// 展示查询结果
renderList(data);
}
});
});
// 查询数据
function getList() {
// 判断是否有搜索条件
var keyword = localStorage.getItem('searchKeyword');
if (keyword) {
// 发送带有搜索条件的查询请求
$.ajax({
url: '/api/list',
data: {
keyword: keyword
},
success: function(data) {
// 展示查询结果
renderList(data);
}
});
} else {
// 发送查询所有数据的请求
$.ajax({
url: '/api/list',
success: function(data) {
// 展示所有数据
renderList(data);
}
});
}
}
// 详情页面
// 获取链接中的参数
var id = getUrlParam('id');
var keyword = getUrlParam('keyword');
// 保存搜索条件到本地存储中
localStorage.setItem('searchKeyword', keyword);
// 返回列表页面
$('#backBtn').on('click', function() {
// 跳转到列表页面,并带上搜索条件
window.location.href = '/list?keyword=' + keyword;
});
// 获取链接中的参数
function getUrlParam(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[2]); return null;
}
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/msword](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)