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;
                }
            });