宜宾网站建设公司

layui导出表格全部数据的方法-创新互联

这期内容当中小编将会给大家带来有关layui导出表格全部数据的方法，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

专注于为中小企业提供成都网站建设、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业裕华免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。layui自带的导出表格，只能导出当前页面，如果当前页包含全部数据，那不就是导出全部数据了吗，所以我给导出事件单独定义了一个请求，当触发这个请求时，在后台查询数据时不要按接收的page 和 limit查询，而是查询全部，这样就实现了导出全部数据。

页面代码：







    

    


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导出表格全部数据的方法了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


分享名称：layui导出表格全部数据的方法-创新互联
分享路径：http://ybzwz.com/article/dgodpo.html

其他资讯