LayUI数据表格自动定时刷新，并且停留在当前页面

朋友刚刚来找我说，想要LayUI的数据表格定时刷新，刷新之后能够停留在当前页面，但是在查询的时候表格又要从第一页开始。

一开始我是想着自动刷新就使用$.post()+定时器，当前页面的话，加个参数区分自动刷新与查询，再加个参数获取当前页再传来传去……糊里糊涂乱七八糟

还没动手就感觉很难，主要是用的Layui的数据表格，有点不熟悉，不知道该怎么处理。但是后面自己看一下，感觉好像没什么难的。

<div class="layui-input-inline">
    <input type="text" name="busName" id="busName" placeholder="请输入车辆或路线名称" class="layui-input">
</div>
<a class="layui-btn reloadBtn" data-type="reload">查询</a>
<!-- 数据表格 -->
<table class="layui-hide" id="table" lay-filter="tableTool"></table>

<script  type="text/javascript">
    var timer1=null,timer2=null;
    layui.use(['table', 'layer'], function() {
        var table = layui.table,
            layer = layui.layer,
            $ = layui.jquery;
        var tableIns = table.render({
            elem: '#table'
            , url: '/app/bus/find'
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]*/
            , cellMinWidth: 80
            , title: '公共交通信息表'
            , cols: [
                [{type: 'checkbox',fixed: 'left'}, 
                 {title: 'id',fixed: 'id',hide: 'true'},
                 {title: '序号',align: 'center',type: 'numbers'}, 
                 {field: 'busName',title: '公交车名称',align: 'center'},
                 {field: 'info',title: '公交信息',align: 'center'}，
                 {fixed: 'right',title: '操作',toolbar: '#tableBar',width: 200}],
            ]
            , page: true
            , id: 'reloadTable'
        });

        // 事件监听
        var active = {
            reload: function() {
                var info = $('#info'),
                    busName=$('#busName');
                timer1=setTimeout(function(){
                    table.reload('reloadTable', {
                        page: {
                            // 从第一页开始
                            curr: 1
                        },
                        where: {
                            info: info.val(),
                            busName: busName.val()
                        }
                    }, 'data');
                    console.log("刷新表格");
                    layer.close(index);
                },1000);
            }
        }
        $('.reloadBtn,.deleteDatasBtn').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        timer2=setInterval(function(){
            if (timer1!=null){
            clearInterval(timer1);
        }
              var info = $('#info'),
                  busName=$('#busName');
              table.reload('reloadTable', {
                  page: {
                      curr: $(".layui-laypage-em").next().html() //当前页码值
                  },
                  where: {
                      info: info.val(),
                      busName: busName.val()
                  }
              }, 'data');
            console.log("刷新表格");
          },6000);
        });
    });
</script>

不管是使用查询还是自动加载，都是用到reload方法，只要区分什么时候是从第一页开始，什么时候是当前页就好了。

还有两个要注意的地方：

1、定时器会越来越多，要控制不管什么时候都是只有一个定时器就好了。

2、当查询花费的时间大于自动更新的时间的话，会卡住（因为自动加载的定时器一直清空刚刚建立的（未得到结果的）查询定时器），这个问题不大，一般定时加载的时间不会间隔太短的，不然也是在浪费网络资源。

因为是使用layUI的数据表格，在刷新的时候表格会闪一下，体验感不是很好，去查了一下还是没有找到确切的解决的方法，可能使用静态表格会好一点吧。