Shulou(Shulou.com)06/03 Report--

This article mainly introduces layui how to export all the table data, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Layui (homophonic: class UI) is a front-end UI framework written by its own module specification, which follows the writing and organization form of native HTML/CSS/JS. It has a very low threshold and is ready to use.

Layui comes with the export table, can only export the current page, if the current page contains all the data, that is not to export all the data, so I defined a separate request for the export event, when triggering this request, do not query the data in the background by the received page and limit query, but query all, so as to achieve the export of all data.

Page code:

Export report layui.use (['form',' table', 'layer'], function () {var table = layui.table, form = layui.form, layer = layui.layer) / / Export table var ins1 = table.render ({elem:'# data_export', url: "url", / / data interface method: 'post', title:' export table name', where: {mycode: "all"}, limit: 10 Cols: [{field: 'id', title:' ID'}, {field: 'name', title:' name'},], done: function (res, curr, count) {exportData = res.data }); / / Export button $(".export") .click (function () {table.exportFile (ins1.config.id, exportData, 'xls');});})

Background processing:

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

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

/ / Export to a separate event Click (".export") .click (function () {var ins1=table.render ({elem:'# data_export', url: "url", / / data interface method: 'post', title:' table name', where: {mycode: "all"}) every time you click on the export Limit: 10, cols: [[{field: 'id', title:' ID'}, {field: 'name', title:' name'},]], done: function (res, curr, count) {exportData=res.data Table.exportFile (ins1.config.id,exportData, 'xls');})

In fact, it is to put table.exportFile (ins1.config.id,exportData, 'xls'); into done, although it does not seem to have changed much, but the essence has changed. The previous way is to load the hidden export table when you enter the page.

Now it is time to click Export to render the hidden export table. When there are many contents of the export table, it is reasonable for users to slow down the export speed, which is much better than the slow page loading speed.

Thank you for reading this article carefully. I hope the article "how to export all the data in the form from layui" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.