关于BootstrapTable 导出数据的问题最终解决方案

2024-12-05 11:04:11

要导出的数据：https://examples.bootstrap-table.com/json/data1.json?order=asc

使用的插件（注意插件版本依赖）：tableExport.jquery.plugin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TableExport</title>
    <!--jquery-->
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <!--bootstrap-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="external nofollow"  rel="stylesheet">
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!--fontawesome-->
    <script src="https://cdn.bootcss.com/font-awesome/5.8.1/js/all.min.js"></script>
    <!--bootstrap-table-->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="external nofollow"  rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
    <!--bootstrap-table-lanuage-->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>
    <!--bootstrap-table-export-->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/export/bootstrap-table-export.min.js"></script>
    <!--在客户端保存生成的导出文件-->
    <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <!--以XLSX（Excel 2007+ XML格式）格式导出表（SheetJS）-->
    <script src="https://cdn.bootcss.com/xlsx/0.14.2/xlsx.core.min.js"></script>
    <!--以PNG格式导出表格-->
    <!--对于IE支持包括 html2canvas 之前的 es6-promise-->
    <script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <!--将表导出为PDF文件-->
    <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>
    <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
    <!--无论期望的格式如何，最后都包含 tableexport.jquery.plugin（不是tableexport）-->
    <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
</head>
<body>
<div class="container">
    <div id="toolbar">
        <select class="form-control">
            <option value="">Export Basic</option>
            <option value="all">Export All</option>
            <option value="selected">Export Selected</option>
        </select>
    </div>
    <button type="button" onclick="exportData()" class='btn btn-mini btn-info'>导出</button>
    <table id="table" data-locale="zh-CN"></table>
</div>
<script>
    $(function () {
        $.ajax({
            url: "https://examples.bootstrap-table.com/json/data1.json?order=asc",
            success: function (result) {
                // 初始化表格
                $('#toolbar').find('select').change(function () {
                    $('#table').bootstrapTable('destroy').bootstrapTable({
                        data: result,
                        pagination: true,//显示分页
                        clickToSelect: true,//单击列表选中
                        toolbar: "#toolbar",//显示工具栏
                        showToggle: true,//工具栏上显示列表模式切换
                        showExport: true,//工具栏上显示导出按钮
                        exportDataType: $(this).val(),//显示导出范围
                        exportTypes: ['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],//导出格式
                        exportOptions: {//导出设置
                            fileName: 'Tablexxx',//下载文件名称
                        },
                        columns: [
                            {
                                field: 'state',
                                checkbox: true,
                                visible: $(this).val() === 'selected'
                            },
                            {
                                field: 'id',
                                title: 'ID'
                            }, {
                                field: 'name',
                                title: 'Item Name'
                            }, {
                                field: 'price',
                                title: 'Item Price'
                            }
                        ]
                    })
                }).trigger('change');
            }
        });
    })
    // 自定义按钮导出数据
    function exportData(){
        $('#table').tableExport({
            type: 'excel',
            exportDataType: "all",
            ignoreColumn: [0],//忽略某一列的索引
            fileName: 'Tablexxx',//下载文件名称
            onCellHtmlData: function (cell, row, col, data){//处理导出内容,自定义某一行、某一列、某个单元格的内容
                console.info(data);
                return data;
            },
        });
    }
</script>
</body>
</html>

结果

bootstrap-table-export：https://bootstrap-table.com/docs/extensions/export/

tableexport.jquery.plugin CDN：https://unpkg.com/tableexport.jquery.plugin/

到此这篇关于BootstrapTable 导出数据的文章就介绍到这了,更多相关BootstrapTable 导出数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

BootstrapTable加载按钮功能实例代码详解

1 html  <div id="toolbar" class="btn-group"> <div style="float:left;margin-right: 10px"> <button class="btn btn-danger"onclick="openModal('add',0,'')">增加</button&g
bootstrapTable+ajax加载数据 refresh更新数据

本文实例为大家分享了bootstrapTable+ajax加载数据,和refresh更新数据两部分,供大家参考,具体内容如下 1.html <form class="form-horizontal" role="form"> <div class="form-group"> <label for="calendar" class="col-sm-1 control-label"
关于BootstrapTable 导出数据的问题最终解决方案

要导出的数据:https://examples.bootstrap-table.com/json/data1.json?order=asc 使用的插件(注意插件版本依赖):tableExport.jquery.plugin <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TableExport</title&g
R语言导入导出数据的几种方法汇总

导出: 对于某一数据集导出文件的方法导出例子:write.csv(data_1,file = "d:/1111111111.csv") 其中data_1是你的数据集,file是你的存储路径和要存储的名字导入: 1 使用键盘输入数据 (1) 创建一个空数据框(或矩阵),其中变量名和变量的模式需与理想中的最终数据集一致: (2)针对这个数据对象调用文本编辑器,输入你的数据,并将结果保存回此数据对象中. 在下例中,你将创建一个名为mydata的数据框,它含有三个变量:age(数值型).
11g Oracle导出表不导出数据默认为空表的解决方法

11g oracle导出表时会默认不导出数据为空 1.Oracle11g默认对空表不分配segment,故使用exp导出Oracle11g数据库时,空表不会导出. 2.设置deferred_segment_creation 参数为FALSE后,无论是空表还是非空表,都分配segment. 在sqlplus中,执行如下命令: SQL>alter system set deferred_segment_creation=false; 查看: SQL>show parameter deferred_
ASP.NET 链接 Access 数据库路径问题最终解决方案

当做小项目用 ASP.NET + Access 数据库时,总是遇到数据库路径问题,本人以前的解决方法是每次访问数据库时,把链接字符串以参数的形式传到数据访问层,实施起来相当麻烦,这次找到了一个比较好的方案,这是本人目前的最终解决方案(如题) ^_^ 解决方案为: 在 Web.Config 中配置 Access 数据库驱动和数据库文件名称. 请看代码 <appSettings> <add key="DBDriver" value="Provider=
Mysql导出数据的正确方法

之前折磨了很久,想在Mysql命令行下导出数据库,但就是每天提示不那个错误,后来才知道其实mysqldump不是mysql命令,因此不能在Mysql命令行下导出. 下面是错误的做法: . 下面才是正确的做法: 即:mysql导出数据库命令只能在系统命令行下使用,而不能在mysql命令行下使用.
SQLServer导出数据到MySQL实例介绍

1从SQLServer导出数据执行BCP: bcp "..." queryout "F:\test.txt" -c –S1.2.3.4 -Usa -P1111 命令参数含义: (1) 导入. 这个动作使用in命令完成,后面跟需要导入的文件名. (2) 导出. 这个动作使用out命令完成,后面跟需要导出的文件名. (3) 使用SQL语句导出. 这个动作使用queryout命令完成,它跟out类似,只是数据源不是表或视图名,而是SQL语句. (4) 导出格式文件. 这
SQL Server Management Studio Express管理器没有导入导出数据的向导的解决方法

办法如下: sqlserver2005中,导入导出数据是通过SQL Server 2005 Integration Services (SSIS)实现的,那么可以在SQL 2005的安装目录下找到DTSWizard.exe,例如我的是在C:\Program Files\Microsoft SQL Server\90\DTS\Binn,在该目录下找到DTSWizard.exe,然后在命令提示符窗口中运行DTSWizard.exe,这时候就可以看到导入导出数据的向导了. 接下来就可以进行导入导出操作
SQL Server2008导出数据之Excel详细解析

最近在看数据库方面的书籍和视频,我觉得数据库的导入和导出很有用,顺便做一下总结,以免将来有遗忘啊!其实导入和导出很相似,思路是一样的,还有导入导出文本,Acess,Excel等等模板也都挺相似的,所以我就总结导出Excel吧.下面请看步骤: 1.首先需要准备的是在你的电脑上创建一个Excel表格(我创建在了桌面上)如图所示(是空的): 2.在SQL Server2008的企业管理器中选择你想要导出的数据库,如图所示. 3.右击选择任务---->导出数据库 4.点击导出数据,出现如图界面. 5.单
Python实现导出数据生成excel报表的方法示例

本文实例讲述了Python实现导出数据生成excel报表的方法.分享给大家供大家参考,具体如下: #_*_coding:utf-8_*_ import MySQLdb import xlwt from datetime import datetime def get_data(sql): # 创建数据库连接. conn = MySQLdb.connect(host='127.0.0.1',user='root'\ ,passwd='123456',db='test',port=3306,char
ASP.NET MVC使用EPPlus，导出数据到Excel中

好久没写博客了,今天特地来更新一下,今天我们要学习的是如何导出数据到Excel文件中,这里我使用的是免费开源的Epplus组件. 源代码下载:https://github.com/caofangsheng93/ExcelExportInMvc 介绍这篇文章,介绍的是怎样导出数据到Excel文件中,大多数的后端程序都有报表功能:把显示在Grid中的数据导出到Excel文件中,这篇文章中使用的是EPPlus组件. EPPlus是一个基于OOXML[Open Extended Markup Lang

关于BootstrapTable 导出数据的问题最终解决方案

相关推荐

随机推荐