The layui table does not update after deleting data and the page number is returned

 Please refer to the description below for the problems encountered during the delete operation using the layui form:

1. HTML page structure

<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. Render the table

    //方法级渲染
    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. Monitor the delete operation 

    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. Deletion method:

 

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

5. Run the above code: when deleting an item on a certain page in the table, without re-obtaining the data. If you do not reload, click the page number to switch to see that the deleted data will still be stored in the table. So you need to reload, modify the code as follows: 

//删除
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. Run the above code: add reload, delete the last data of the last page, it will directly display no data, the page number is gone, and it will not jump to the previous page. After modifying the code, it is as follows: 

 

//删除
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. Get the current page number var recodePage = $(".layui-show .layui-laypage-skip .layui-input").val();

Run the above code: No matter which page is deleted, it will return to the previous page of the current page, and if curr: 1 it will return to the first page.

The effect I want is to automatically return to the previous page after deleting the last one on the current page. Reload will trigger render again, so I modify the code in the done method of render as follows.

 

//方法级渲染
    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
        });
   }
}