Home > Article > Web Front-end > layui exports all data in the table

layui exports all data in the table

尚forward: 2019-11-18 17:12:599652browse

layui (homophone: UI-like) is a front-end UI framework written using its own module specifications. It follows the writing and organizational form of native HTML/CSS/JS. The threshold is extremely low and can be used out of the box.

The export table that comes with layui can only export the current page. If the current page contains all the data, then it means exporting all the data, so I give the export event a separate A request is defined. When this request is triggered, when querying data in the background, do not query according to the received page and limit, but query all, thus realizing the export of all data.

Page code:

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

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

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

Background processing:

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

Optimization: The corresponding code is the second js code above:

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

is actually the table .exportFile(ins1.config.id,exportData, 'xls'); is placed in done. Although it seems that there are not many changes, the essence has changed. The previous method was to load the hidden export table when entering the page.

Now, the hidden export table will be rendered only when export is clicked. When the export table contains a lot of content, users will think that a slower export speed is reasonable and is much better than a slow page loading speed.

For more layui related knowledge, please pay attention to layui framework.

The above is the detailed content of layui exports all data in the table. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Common methods of layuiNext article：Common methods of layui

See more

layui exports all data in the table

Related articles