LayuiTable导出所有数据excel,无需修改后端代码,仅前端处理。
layui table自带的导出功能仅导出单页的数据,搜索一番之后发现大部分都是通过另外发送ajax请求,让后端进行处理,或是生成excel下载链接,或是后端返回所有数据然后用table.exportFile导出。其实可以利用render,设置limit为总数量实现数据重新加载并导出。方法可行,并不推荐。
·
layui table自带的导出功能仅导出单页的数据,搜索一番之后发现大部分都是通过另外发送ajax请求,让后端进行处理,或是生成excel下载链接,或是后端返回所有数据然后用table.exportFile导出。
其实可以利用render,设置limit为总数量实现数据重新加载并导出。
方法可行,并不推荐。
html
<div class="layui-form layui-card-body">
<div class="layui-form-item">
<button class="layui-btn layui-bg-black iconfont icon-daochu" id="btnExport">导出</button>
</div>
</div>
js
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中设置一个导出全部的按钮,事件:
$("#btnExport").click(function () {
table.reload('datatab',{
page: 1,
limit:tableDataCount, //加载所有数据
title: '步数榜单',
done:function (){
//导出所有数据
table.exportFile("datatab",false,"xls");
//恢复数据分页显示
table.reload('datatab',{
page: 1,
limit:20,
done:function (res, curr, count){
tableDataCount = count;
console.log(res.data)
}
})
}
})
})
}
})
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)