layui table 导出分页
时间: 2023-06-20 09:04:39 浏览: 433
在 layui table 中进行分页导出的实现,需要用到 layui 的 table 模块中的 exportFile 方法。该方法可以将 table 中的数据导出为 Excel 或 CSV 格式,并支持分页导出。
具体实现步骤如下:
1. 在 layui table 中添加一个导出按钮,用于触发导出操作。
```html
<button class="layui-btn layui-btn-sm export-btn">导出</button>
```
2. 在 JavaScript 中绑定导出按钮的点击事件,并调用 table 模块的 exportFile 方法。
```javascript
layui.use(['table', 'util'], function() {
var table = layui.table,
util = layui.util;
// 导出按钮点击事件
$('.export-btn').on('click', function() {
// 获取当前 table 的数据和分页信息
var data = table.cache['table-id'],
page = table.cache['table-id'].page;
// 设置导出文件名
var filename = 'table-' + util.toDateString(new Date(), 'yyyyMMddHHmmss');
// 调用导出方法
table.exportFile(['列1', '列2', '列3'], data, filename, page);
});
});
```
3. 在导出方法中,需要传入三个参数:表头、数据、文件名和分页信息。
```javascript
table.exportFile(['列1', '列2', '列3'], data, filename, page);
```
其中,表头是一个数组,包含所有要导出的列的名称;数据是一个数组,包含所有要导出的数据;文件名是要导出的文件名,可以自定义;分页信息是一个对象,包含当前页码和每页显示的数据条数。
完整代码示例:
```html
<table id="table-id" lay-filter="table-filter"></table>
<button class="layui-btn layui-btn-sm export-btn">导出</button>
<script>
layui.use(['table', 'util'], function() {
var table = layui.table,
util = layui.util;
// 渲染表格
table.render({
elem: '#table-id',
url: '/api/data',
cols: [[
{field: 'id', title: '编号'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
{field: 'gender', title: '性别'},
{field: 'address', title: '地址'}
]]
});
// 导出按钮点击事件
$('.export-btn').on('click', function() {
// 获取当前 table 的数据和分页信息
var data = table.cache['table-id'],
page = table.cache['table-id'].page;
// 设置导出文件名
var filename = 'table-' + util.toDateString(new Date(), 'yyyyMMddHHmmss');
// 调用导出方法
table.exportFile(['编号', '姓名', '年龄', '性别', '地址'], data, filename, page);
});
});
</script>
```
阅读全文