データを削除した後、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.上記のコードを実行します。データを再取得せずに、テーブルの特定のページのアイテムを削除する場合。リロードしない場合は、ページ番号をクリックして切り替え、削除されたデータが引き続きテーブルに保存されることを確認してください。したがって、リロードする必要があり、次のようにコードを変更します。 

//删除
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.上記のコードを実行します：リロードを追加し、最後のページの最後のデータを削除します。データは直接表示されず、ページ番号はなくなり、前のページにジャンプしません。コードを変更すると、次のようになります。次のとおりです。 

 

//删除
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.現在のページ番号を取得しますvarrecodePage = $（ "。layui-show.layui-laypage-skip .layui-input"）。val（）;

上記のコードを実行します。どのページを削除しても、現在のページの前のページに戻り、curr：1の場合は最初のページに戻ります。

私が望む効果は、現在のページの最後のページを削除した後、自動的に前のページに戻ることです。リロードするとレンダリングが再度トリガーされるため、doneメソッドのrenderのコードを次のように変更します。

 

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