我们经常会需要将表格的数据导出excel格式,bootstrap-table有个导出的扩展插件
首先引入四个js文件
<script src="../../plugins/tableExport.jquery.plugin-master/libs/FileSaver/FileSaver.min.js"></script> <script src="../../plugins/tableExport.jquery.plugin-master/libs/js-xlsx/xlsx.core.min.js"></script> <script src="../../plugins/tableExport.jquery.plugin-master/tableExport.js"></script> <script src="../../plugins/tableExport.jquery.plugin-master/bootstrap-table-export.js"></script>
在table里设置属性data-export-types="['excel']"
下面是js
$(document).ready(function(){ $('#tableTest1').bootstrapTable('resetView'); $('#tableTest1').bootstrapTable('destroy').bootstrapTable({ showExport: true,//显示导出按钮 exportDataType: "all",//导出类型 }); })
这样就可以导出全部数据
如果在表格的上面可以选择基本导出(在分页的情况导出当前页)和全部导出
需要在table上面加
<div id="toolbar"> <select class="form-control"> <option value="">单页导出</option> <option value="all">导出全部</option> </select> </div>
下面的js改成如下:
$(document).ready(function(){ $('#tableTest1').bootstrapTable('resetView'); var $table = $('#tableTest1'); $('#toolbar').find('select').change(function () { $table.bootstrapTable('destroy').bootstrapTable({ exportDataType: $(this).val() }); }); })
(adsbygoogle = window.adsbygoogle || []).push({});