LayuiTable导出所有数据excel,无需修改后端代码,仅前端处理。

这篇具有很好参考价值的文章主要介绍了LayuiTable导出所有数据excel,无需修改后端代码,仅前端处理。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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文章来源地址https://www.toymoban.com/news/detail-672833.html

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

    }
})

到了这里,关于LayuiTable导出所有数据excel,无需修改后端代码,仅前端处理。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包