layui的数据表格定时刷新

HTML片段:

<!-- class="layui-form-item layui-form"  定义后就别再添加<form>标签了,否则会触发2次提交,class="layui-form-item layui-form" 就等于定义了一个form表单-->

<div class="layui-form-item layui-form" lay-filter="request-form" style="margin:0">

表单的某些搜索条件...

    <div class="layui-inline">
		<button class="layui-btn" id="searchBtn" lay-submit lay-filter="data-search-btn" ><i class="layui-icon layui-icon-search">搜索</i></button>
	</div>
</div>


<script type="text/html" id="toolbarDemo"></script> <!--表格工具栏-->
<table id="currentTableId" lay-filter="currentTableFilter"></table> <!--表格-->

js:

layui.use(['layer', 'form', 'laydate', 'table'], function() {
	var $ = layui.jquery, form = layui.form, layer = layui.layer, table = layui.table;
	var tempInterval; //定时器

	table.render({
	elem: '#currentTableId',
	method: 'post',
	url: 'xxx',
	toolbar: '#toolbarDemo',
	defaultToolbar: ['filter', 'exports', 'print' ],
	where: {..}, //加载条件,可注释
	cols: [
		[
			字段....
		] 
	],
	page: true,
	limit: 20,
	limits: [20, 50, 100, 500, 1000, 2000, 5000, 10000],
	done: function (res, curr, count){ //table加载完成后执行
		if(tempInterval !=null ){ //如果已经有定时器了,那么就清空之前的定时器,否则每次加载都创建一个,最后有无数个一起执行
			clearTimeout(tempInterval);
            //网上有看到定时任务清除不掉时在定时任务前添加window就ok了,
            //例如window.setInterval(xx)  ---> window.clearInterval(xx)
		}

		//定时30s刷新一次表格
		tempInterval = setTimeout(function() {
			//debugger;
			console.log("触发定时刷新,现在的时间: " + new Date() ); 
			searchBtn.click();//触发搜索按钮(searchBtn是搜索按钮的ID)
		}, 10000); //10秒刷新一次
	}
});

//搜索
form.on('submit(data-search-btn)', function (data) {
		table.reload('currentTableId', {
		where: {

                ...某些重载条件,data.field.xxx可以直接获取表单中元素的值
			}
		}, 'data');
	}
});

以上定时刷新就完成了,但是发现一个问题,但跳转到别的页面时,该定时任务还在执行,待解决

解决办法:

1. 在跳转页面的时候执行清除定时任务(因为我页面100多个不可能所有跳转都加,所以没测试过):

clearTimeout(tempInterval);或//clearInterval(tempInterval); 看定义的是哪种定时任务
//如果无效那就添加window.clearTimeout(tempInterval)或//window.clearInterval(tempInterval);

JS有两种定时器分别是setTimeout()和setInterval(),这两个区别就是setTimeout()是一次性的定时器,而setInterval()是循环的定时器。

(1)setTimeout()
只执行一次,在指定的毫秒数之后,就会立即停止

(2)setInterval()
不管语句是否执行完成,不管是否执行错误,到下一次指定的毫秒数后就会立即执行

2. 直接给搜索按钮的id改成一个全局HTML都唯一的,一定要全局搜索的确是唯一的才行

例如 我搜索按钮的id =“searchBtn” ,当定时器执行时找不到searchBtn时就无法触发定时刷新了

但是必须注意我使用定时器是setTimeout执行完一次就销毁了,因为我是重复调用,所以不需要循环定时任务也就没有使用setInterval (这个会一直循环,无限生成定时器,慎用)

3. 猜测中的办法,后面尝试后发现无用(后面会找找原因):

在当前html的js中添加一个变量 ,当定时器执行的时候判断是否是当前页面,如果不是就不执行定时任务------》发现即使我跳转页面这个变量值还是存在,明明别的页面没有加载这个js

 

拓展HTML其他定时任务:

1.

html代码实现,在页面的head区域块内加上如下代码
	<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />  <!--5秒钟后跳转到指定的页面-->

2. 

<span id="test"> 10</span>

<script> ---页面添加倒计时 + 定时任务
  var t = 10;//设定跳转的时间
  setInterval("refer()",1000); //启动1秒定时
  function refer(){
    if(t==0){
      location="http://www.baidu.com"; //#设定跳转的链接地址
    }
    $('#test').text = t +"秒后跳转到百度"; // 显示倒计时
    t--; // 计数器递减
  }
</script>

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

往事不堪回首..

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值