LayuiTable导出所有数据,无需修改后端代码

EN
EN
2022-07-26 / 3 评论 / 2,116 阅读 / 正在检测是否收录...

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

方法可行,并不推荐。

var tableDataCount = 0;
table.render({
    elem: '#datatab'
    ,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('datatab',{
    page: 1,
    limit:tableDataCount //加载所有数据
    ,where: {where}
    ,done:function (){
        //导出所有数据
        table.exportFile("datatab",false,"xls");
        //恢复数据分页显示
        table.reload('datatab',{
            page: 1,
            limit:20
            ,where: {where}
            ,done:function (res, curr, count){
                tableDataCount = count;
            }
        })


    }
})
1

评论 (3)

取消
  1. 头像
    ccc
    Windows 10 · Google Chrome

    这种一进来就导出的操作怎么处理呢

    回复
  2. 头像
    w454561
    Windows 10 · Google Chrome

    谢谢博主,不过我用的时候把//恢复数据分页显示的【where: {where}】改成了【data:res.data】,这样,就不用再去后台请求数据了

    回复
  3. 头像
    tablePlus
    Windows 10 · Google Chrome

    基于layui的table模块的插件tablePlus,调用的时候三步设置即可,数据完美导出,支持筛选导出,无需开发,无需过多的代码,三行代码搞定,兼容原来的layui table模块。

    具体地址:https://blog.gougucms.com/home/article/detail/id/213.html

    回复