在用layui自带的table导出excel表的时候发现,分页的时候只能导出当前页的数据。项目中甲方要求导出所有数据,后进行很多解决办法的尝试。
1.刚开始想到有用toobar在表头工具栏自己加一个导出按钮,不用layui设置的导出按钮,用户点击导出按钮的时候,发一个page:1,limit:100000000(将limit设置到足够大,以保证能请求到所有数据)的请求,再通过layui设置的导出任意数据的基础方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导出数据表格所有数据</title>
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>
<table id="LAY-credit-score" lay-filter="LAY-credit-score"></table>
<script type="text/html" id="toolbarExcel">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getExcel">导出表格</button>
</div>
</script>
<script src="../layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['table'],function () {
var table = layui.table,
$ = layui.$;
tableIns = table.render({
, url: 'xxx'
,headers: {
"Authorization": "xxx"
}
, elem: '#LAY-credit-score'
, page: true //开启分页
, toolbar: '#toolbarExcel'
, defaultToolbar: []
, cols: [
[{
field: 'name',
title: '用户名',
align: 'center'
}, {
field: 'telephone',
title: '手机号',
align: 'center'
},{
field: 'creditvalue',
title: '积分值',
align: 'center',
sort:true
},{
field: 'other1',
title: '违约次数',
align: 'center',
sort: true
}]
],
done: function (res, curr, count) {
}
});
table.on('toolbar(LAY-credit-score)', function(obj){
switch(obj.event){
case 'getExcel':
//请求所有数据
$.ajax({
type:'get',
url:'xxx',
headers: {
"Authorization": "xxx"
},
data: {
page:1,
limit:100000000
},
success:function (res) {
table.exportFile(obj.config.id, res.data, 'xls');
}
});
break;
};
});
})
</script>
</body>
</html>
遇到的问题:
- 有的列显示不全,后发现原因是field没有设置列名的列都不能导出
- 用templet修改后的值不能再excel中显示出来,显示的还是后台返回的值,后发现新版的layui已解决这个bug
2.后来换用一种思路,将设置limits:[10,20,30,40,50,10000000]达到方式1中的ajax请求效果,还是继续用layui的导出按钮,并更新layui的table.js为最新版本(为什么不直接替换整个layui文件?因为有些源码有修改)
, page: true //开启分页
, toolbar: true
, defaultToolbar: ["exports"]
, limits:[10,20,40,90,100000000]
最后实现能导出所有数据到excel表,而且templet修改后的值也能导出到excel中。只有一次请求太多数据,会出现请求超时的情况。