layui 表格删除数据后不更新以及返回页码问题

 使用layui 表格，删除操作时遇到的问题，请见下方描述：

1、html 页面结构

<table lay-filter="tasktimer" id="tasktimer"></table>
<script type="text/html" id="barDemo2">
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"></a>
</script>

2、渲染表格

    //方法级渲染
    var tasktimer = table.render({
        elem: '#tasktimer'
        , cols: [[{field: 'name', title: sceneName, width: 120}
            , {field: 'path', title: time, width: 124}
            , {fixed: 'right', width: 100, align: 'center', toolbar: '#barDemo2'}
        ]]
        , btns: ['now', 'confirm']
        , height: 433
        , data: sceneTaskLists
        , limit: 9
        , page: {
            layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            , groups: 2 //只显示 1 个连续页码
            , first: false //不显示首页
            , last: false //不显示尾页
        },
        done: function (res, curr)  {
        }
    });

3、监听删除操作 

    table.on('tool(tasktimer)', function (obj) { //
        let data = obj.data //获得当前行数据
            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'del') {
            console.log(data);
            obj.del(); //删除对应行（tr）的DOM结构
            sceneTaskRemove(data.id);
            layer.msg("删除成功！", {icon: 1});
        }
    });

4、删除方法：

 

//删除
function sceneTaskRemove(id) {
    for (let i = 0; i < sceneTaskLists.length; i++) {
        if (id == sceneTaskLists[i].id) {
            sceneTaskLists.splice(i, 1);
            break;
        }
    }
}

5、运行以上代码：随便删除表格里的某一页的某一项时，不重新获取数据的情况下。如果不重新reload，再点击页码切换看到删除的数据还会存在表格里。所以需要reload，修改代码后如下： 

//删除
function sceneTaskRemove(id) {
    for (let i = 0; i < sceneTaskLists.length; i++) {
        if (id == sceneTaskLists[i].id) {
            sceneTaskLists.splice(i, 1);
            break;
        }
    }
    if (tasktimer) {
        tasktimer.reload({
            "data": sceneTaskLists
        });
   }
}

6、运行以上代码：加上reload，删除最后一页最后一条数据会直接显示无数据，页码也没有了，也不会跳到上一页去，修改代码后如下： 

 

//删除
function sceneTaskRemove(id) {
    for (let i = 0; i < sceneTaskLists.length; i++) {
        if (id == sceneTaskLists[i].id) {
            sceneTaskLists.splice(i, 1);
            break;
        }
    }
    var recodePage = $(".layui-show .layui-laypage-skip .layui-input").val();
    tasktimer.reload({
        "data": sceneTaskLists
        , page: {
            curr: recodePage - 1 //设定初始在第 5 页   //1 就是第一页
        }
    })

}

 

7、获取当前页码 var recodePage = $(".layui-show .layui-laypage-skip .layui-input").val();

运行以上代码：无论在哪页删除哪条数据都会返回到当前页的上一页去，如果 curr: 1  就都返回第一页。

我想要的效果是当前页删除完最后一条就自动返回上一页去。reload 会再触发render，所以我在render的done方法里修改代码如下就可以了。

 

//方法级渲染
    tasktimer = table.render({
        elem: '#tasktimer'
        , cols: [[{field: 'name', title: sceneName, width: 120}
            , {field: 'path', title: time, width: 124}
            , {fixed: 'right', width: 100, align: 'center', toolbar: '#barDemo2'}
        ]]
        , btns: ['now', 'confirm']
        , height: 433
        , data: sceneTaskLists
        , limit: 9
        , page: {
            layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            , groups: 2 //只显示 1 个连续页码
            , first: false //不显示首页
            , last: false //不显示尾页
        },
        done: function (res, curr)  {
            if (curr > 1 && res.data.length === 0) {
                tasktimer.reload({
                    data: sceneTaskLists,
                    page: {
                        curr: curr - 1
                    }
                });
            }
        }
    });

//删除
function sceneTaskRemove(id) {
    for (let i = 0; i < sceneTaskLists.length; i++) {
        if (id == sceneTaskLists[i].id) {
            sceneTaskLists.splice(i, 1);
            break;
        }
    }
    if (tasktimer) {
        tasktimer.reload({
            "data": sceneTaskLists
        });
   }
}