您的当前位置:首页>全部文章>文章详情

Layui的table模块导出所有数据,无需修改前后端代码

发表于:2022-11-04 23:53:55浏览:1670次TAG: #layui #Table #导出数据

layui table自带的导出功能仅导出单页的数据,搜索一番之后发现大部分都是通过另外发送ajax请求,让后端进行处理,或是生成excel下载链接,或是后端返回所有数据然后用table.exportFile导出。其实可以利用render,设置limit为总数量实现数据重新加载并导出。

var tableDataCount = 0;
table.render({
    elem: '#datatable'
    ,url: '...数据接口'
    ,skin:'line'
    ,even:true
    ,method:'post'
    ,limit:20
    ,title:'数据'
    ,height:'full-60'
    // ,size:'lg'
    ,cols: [[
        {field:'id', width:80, title: 'ID', sort: true},
        {field:'name',minWidth:'100', title: '姓名'},
    ]]
    ,page: true
    , done: function(res, curr, count){
        tableDataCount = count;//记录所有数据数量
    }
});

//在html中设置一个导出全部的按钮,事件:
table.reload('datatable',{
    page: 1,
    limit:tableDataCount //加载所有数据
    ,where: {where}
    ,done:function (){
        //导出所有数据
        table.exportFile("datataleb",false,"xls");
        //恢复数据分页显示
        table.reload('datatable',{
            page: 1,
            limit:20
            ,where: {where}
            ,done:function (res, curr, count){
                tableDataCount = count;
            }
        })
    }
})