LayuiTable はすべてのデータを Excel にエクスポートします。バックエンド コードを変更する必要はなく、フロントエンドの処理のみを行います。

layui テーブルに付属しているエクスポート機能は、単一ページのデータのみをエクスポートしますが、検索すると、ほとんどの場合、処理のためにバックエンドに ajax リクエストを送信するか、Excel のダウンロード リンクを生成するか、バックエンドがすべてのデータを返し、次に、table.exportFile を使用してエクスポートします。
実際、render を使用して、データのリロードとエクスポートの合計量に制限を設定できます。

この方法は実行可能ですが、お勧めできません。

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

    }
})

おすすめ

転載: blog.csdn.net/qq_32307773/article/details/131035337