layui导出表格全部数据

layui自带的导出表格，只能导出当前页面，如果当前页包含全部数据，那不就是导出全部数据了吗，所以我给导出事件单独定义了一个请求，当触发这个请求时，在后台查询数据时不要按接收的page 和 limit查询，而是查询全部，这样就实现了导出全部数据。

页面代码：

<!--导出按钮 或其他触发事件-->
<button class="export">导出报表</button>

<!--导出表 不展示-->
<div style="display: none;">
    <table id="data_export">
    </table>
</div>

    layui.use(['form', 'table', 'layer'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer；
        //导出表格
        var ins1 = table.render({
            elem: '#data_export',
            url: "url", //数据接口
            method: 'post',
            title: '导出表的表名',
            where: {
                mycode: "all"
            },
            limit: 10,
            cols: [[
                {field: 'id', title: 'ID'},
                {field: 'name', title: '名称'},
            ]],
            done: function (res, curr, count) {
                exportData = res.data;
            }
        });
        //导出按钮
        $(".export").click(function () {
            table.exportFile(ins1.config.id, exportData, 'xls');
        });
    })

后台处理：

if ($mycode) {
    $data = M('mysql')->where($where)->select();  
    echo json_encode(['code' => 0, 'msg' => "", 'data' => $data]);                     
}

 

后来我又优化了一下，对应的代码是上面第二段js代码：

    //导出改为单独的事件，每次点击导出才会执行
    $(".export").click(function(){
        var ins1=table.render({
            elem: '#data_export',
            url: "url", //数据接口
            method: 'post',
            title: '表名',
            where: {
                mycode: "all"
            },
            limit: 10,
            cols: [[
                {field: 'id', title: 'ID'},
                {field: 'name', title: '名字'},
            ]],
            done: function (res, curr, count) {
                exportData=res.data; //好像因为请求的本页还是只能导出本页
                table.exportFile(ins1.config.id,exportData, 'xls');
            }
        });
    })

其实就是把  table.exportFile(ins1.config.id,exportData, 'xls');  放到了done中，虽然看起来改的不多，但是本质已经变了，之前的方式是进入页面就加载隐藏的导出表，而现在是点击导出的时候才会渲染隐藏导出表，在导出表内容多的时候，导出速度慢点用户会觉得是合理的，比页面加载速度慢要好多了。

 

layui数据表格自带导出功能只能导出当前分页数据，如果想导出完整表格可以采用

table.exportFile(col,data , 'xls');

col为组装自定义表头数组，

data为重新请求的完整表格数据，

xls为导出文件类型。

其中data可以重新写一个完整数据的接口，直接返回数据，不用按数据表格接口格式返回(因为标准格式中有状态码和分页等相关信息为了分页)。

举例：var col=['a','b','c'];

data=[

{a:1,b:1,c:1},

{a:2,b:2,c:2},

{a:3,b:3,c:3}

];

导出结果就应该是：

a	b	c
1	1	1
2	2	2
3	3	3

 

自写的通过按钮一键导出

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="exportEvent">导出所有数据</button>
    </div>
</script>

 // 头工具栏事件  导出所有数据
            table.on('toolbar(dataTable)', function(obj){
                let beginDate = '',endDate = '';
                if ($("#queryTime").val() != '' && $("#queryTime").val() != null){
                    beginDate = $("#queryTime").val().substr(0,19);
                    endDate = $("#queryTime").val().substr(22);
                }
                let s = Date.parse(beginDate);
                let e = new Date(endDate).getTime();
                //计算两个时间间隔天数
                // let d = (e-s)/(1000*60*60*24);
                // if(d > 2){
                //     layer.msg('最多只能选择2天');
                //     return false;
                // }
                let state = $("#stateDiv").val();
                console.log(state)

                let queryParam = {
                    beginDate:beginDate,
                    endDate:endDate,
                    state:state,
                };
                console.log(queryParam)
                switch(obj.event){
                    case 'exportEvent':
                        console.log('addEvent事件')
                        $.ajax({
                            url: basePath + '/jst_order_info/findAll',
                            type: 'post',
                            data:queryParam,
                            success: function (res) {
                                if (res.code == 0){
                                    // console.log(res.data)
                                    table.exportFile('dataTable',res.data,'xls'); //表名 数据  格式
                                } else{
                                    layer.alert(res.message);
                                }
                            }
                        })
                        break;
                }
            });