layui让当前页面刷新_layui关闭弹窗后刷新主页面和当前更改项的例子
时间: 2023-11-15 21:15:07 浏览: 127
您可以使用以下代码实现关闭弹窗后刷新主页面和当前更改项的功能:
```
// 关闭弹窗后刷新主页面和当前更改项
layui.use(['form'], function(){
var form = layui.form;
// 监听弹窗中的提交按钮
form.on('submit(submitBtn)', function(data){
// 提交表单数据
// 关闭弹窗
layer.closeAll('page');
// 刷新主页面
location.reload();
// 或者刷新当前更改项
// location.reload('当前更改项的URL');
return false;
});
});
```
其中,`submitBtn` 是弹窗中的提交按钮的 lay-filter 值,`location.reload()` 可以刷新当前页面或指定的页面。
相关问题
layui AJAX 请求成功后,不关闭弹窗和刷新父页面
如果你想在 AJAX 请求成功后不关闭弹窗和刷新父页面,可以在 AJAX 请求成功的回调函数中添加相应的逻辑。
例如,假设你的弹窗中有一个表单,填写完毕后点击提交按钮会发起 AJAX 请求,并在请求成功后显示成功提示信息,你可以这样编写提交按钮的点击事件处理函数:
```javascript
$('#submitBtn').click(function() {
$.ajax({
// ... 这里填写你的 AJAX 请求参数 ...
success: function(data) {
// 处理请求成功的情况
layer.msg('提交成功!', {icon: 1});
},
error: function(xhr, status, error) {
// 处理请求失败的情况
layer.msg('提交失败,请重试!', {icon: 2});
}
});
});
```
在这个例子中,我们在 AJAX 请求成功的回调函数中调用了 `layer.msg()` 方法,显示了一个成功提示信息,但是并没有关闭弹窗和刷新父页面。你可以根据具体的需求,在回调函数中添加相应的逻辑。
layui刷新当前页面不重置页码
在layui中,要刷新当前页面而不重置页码,可以采取以下几种方法:
1. 使用layui的table模块的reload函数,该函数可以重新加载数据源,并保持当前页码不变。具体的做法是,在刷新按钮的点击事件中调用该函数,传递当前的页码参数即可。例如:
```
$('#refreshBtn').on('click', function(){
var currPage = tableIns.config.page.curr; //获取当前页码
tableIns.reload({
page: {
curr: currPage //将当前页码传递给reload函数
}
});
});
```
2. 在刷新页面时,将当前页码保存到localStorage或sessionStorage中,然后在页面重新加载完成后,再从localStorage或sessionStorage中读取当前页码,并手动设置到layui的table模块中。具体的实现步骤如下:
- 在刷新按钮的点击事件中,将当前页码保存到localStorage或sessionStorage中:
```
$('#refreshBtn').on('click', function(){
var currPage = tableIns.config.page.curr; //获取当前页码
sessionStorage.setItem('currPage', currPage); //将当前页码保存到sessionStorage中
location.reload(); //刷新页面
});
```
- 在页面加载完成后,读取localStorage或sessionStorage中的当前页码,并设置到layui的table模块中:
```
layui.use('table', function(){
var table = layui.table;
var currPage = sessionStorage.getItem('currPage'); //从sessionStorage中读取当前页码
if(currPage){
table.reload('data', {
page: {
curr: currPage //将保存的当前页码设置到table模块中
}
});
}
});
```
通过以上两种方法,我们可以在刷新页面时保持当前页码不变,实现无重置页码的刷新效果。