layui批量删除如何刷新当前分页

需求背景

在基于layui的前端页面开发中，我们常常会使用表格组件，并且通常情况下，我们会按照数据进行分页展示，这时候，我们在删除某一页的数据后，需要重新刷新当前页数据，而不是直接跳转至第一页，此时，我们就需要通过一些技巧，来实现这个需求。

解决方案

要实现在layui表格组件中批量删除数据后，刷新当前分页，通常的做法是利用表格组件的reload方法，但是由于reload方法会自动跳转至第一页，所以我们需要记录当前页码，然后在删除数据后调用reload方法，同时将页码传递给reload方法，这样就能实现刷新当前页数据的目的。

//获取当前页码
var page = $('.layui-laypage-em').next().html();

//删除数据操作

//调用reload方法刷新当前页码数据
table.reload('test', {
    page: {curr: page}
});

优化方案

以上方案可以实现刷新当前页数据的功能，但是需要手动记录当前页码，并传递给reload方法，比较麻烦。为此，我们可以通过监听删除事件，在删除数据的同时，记录当前页码，并将其存储在layui本地存储中，然后调用reload方法时，可以从本地存储中获取当前页码，从而实现刷新当前页数据的目的。

//监听删除按钮点击事件
table.on('toolbar(test)', function(obj){
    if(obj.event === 'delete'){
        //获取当前页码并存储到本地
        var currPage = $('.layui-laypage-em').next().html();
        layui.data('table', {key: 'currPage', value: currPage});

        //执行删除操作
        //...

        //调用reload方法刷新当前页码数据
        table.reload('test', {
            page: {curr: layui.data('table').currPage}
        });
    }
});

样例代码

以下是一个完整的样例代码，展示了如何在layui表格组件中批量删除数据后，刷新当前页数据，并将当前页码存储到layui本地存储中。

//HTML代码


//JavaScript代码
layui.use(['table','layer'], function(){
    var table = layui.table;
    var layer = layui.layer;

    //渲染表格
    table.render({
        elem: '#test'
        //...
    });

    //监听删除按钮点击事件
    table.on('toolbar(test)', function(obj){
        if(obj.event === 'delete'){
            //获取当前页码并存储到本地
            var currPage = $('.layui-laypage-em').next().html();
            layui.data('table', {key: 'currPage', value: currPage});

            //执行删除操作
            var checkStatus = table.checkStatus('test');
            var data = checkStatus.data;
            if(data.length === 0){
                layer.msg('请选择要删除的数据', {icon: 7});
                return;
            }
            layer.confirm('确认删除选中的数据吗？', function(index){
                //模拟删除操作
                layer.msg('删除成功', {icon: 1});
                //调用reload方法刷新当前页数据
                table.reload('test', {
                    page: {curr: layui.data('table').currPage}
                });
            });
        }
    });
});