前端dataTables不显示导出按钮

最新推荐文章于 2025-05-16 22:07:57 发布
最新推荐文章于 2025-05-16 22:07:57 发布
阅读量242 收藏
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_30757815/article/details/143995809
版权

我们的项目是Arm板上运行的Qt应用程序，做事不能老局限自己，我觉得提供web页面是个很常见的需求。工作以来只会C++，什么Java，HTML，JavaScript一概不会。
我发现深入钻研一项技术，成为专家，好像对我来说挺难的，但是打通上下游，具有做产品的视野，我倒是可以考虑。包括之前不会Qt，也是自己逐渐摸索，不主动学习的老IT，慢慢就要被时代淘汰了。
按照项目需求，用前端JS dataTables库做了一个数据表格，表格当然得有导出功能啊，一顿百度，感觉是个常见需求，应该挺快弄出来的，没想到卡住好久了。
照着别人的步骤来弄，结果尴尬了，没出现导出按钮，仔细核对了步骤 ，没错啊，后面又找了几篇文章，还是出不来导出按钮，这就尴尬了，天天强调的学习，增加解决问题能力，碰到一个简单的前端问题就卡住了，无法解决了。
既然网上给出的方法都是差不多，那应该别人写得没错 ，错的是我。仔细和别人核对了下，就是别人的dataTables.buttons.min.js库版本，我觉得有点老，用了最新的，我重新按照别人的文章下了对应的版本，结果就正常了。当然为啥换了版本不行呢，这个问题还是没搞懂。
接着把对应的版本都下载到本地即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 
    <link href="../plugins/css/jquery.dataTables.css" rel="stylesheet" />
	<link href="../plugins/css/buttons.dataTables.min.css" rel="stylesheet">
	<script src="../js/jquery-3.7.1.min.js""></script>
	<script src="../js/jquery.dataTables.min.js"></script>
	<script src="../js/dataTables.buttons.min.js"></script>
	<script src="../js/jszip.min.js"></script>
	<script src="../js/buttons.html5.min.js"></script>

</head>
<body>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
 
        </tbody>
    </table>
 
<script type="text/javascript"> 


$('#example').DataTable( {

dom: 'Bfrtip',
paging: true, // 开启分页
ordering: true, // 允许排序
searching: false, // 关闭搜索功能
bLengthChange: false,
buttons: ['copy', 'excel', 'csv'],
pageLength: 14 // 默认每页显示 14 条记录
} );

</script>
 
</body>
</html>
信计小白
关注
datatables表格分页和导出的例子
xiegongmiao的博客
12-14 4132
datatables  datatables 插件官网下载，地址：http://www.datatables.club/ 例子图片：  1.  html QualityUser 所属地市 总用户数 播放用户数
dataTables中的数据自带分页和查询以及自带导出excel表格
lvping100的博客
10-31 4158
dataTable是一个对后端人员开发的人员来说，是一个很好的前端开发工具。自带了分页，及查询和导出excel还有很多的功能。请看datatables的官网。 --> DD_belatedPNG.fix('*'); 资讯列表  首页 > 资讯管理 &g
DataTables导出和打印功能深入指南
weixin_42527589的博客
04-24 609
在当今的数据驱动的互联网时代，DataTables库因其强大的数据处理能力和灵活的自定义选项，已成为前端开发者在实现表格数据交互时不可或缺的工具。DataTables是一个功能强大的jQuery插件，它为HTML表格提供了许多高级的控制功能，包括排序、搜索、分页以及可定制的显示选项。尽管其核心功能主要是前端展现，但通过扩展插件和合理的后端集成，DataTables同样可以实现复杂的数据导出功能，如导出CSV、Excel和PDF等格式。DataTables的基础功能主要包括：动态内容处理。
DataTables - 导出buttons使用
Gosick_Geass_Gate的博客
10-06 1534
（一）代码示例 html代码和javascript代码可以参考官网的例子：https://datatables.net/extensions/buttons/examples/initialisation/simple.html。 （二）DataTables配置 需要用到jQuery和DataTables相关的css和javascript代码： <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.16/
dataTables——buttons中的excel按钮，导出固定行列的数据
weixin_43235307的博客
12-16 794
buttons: [ { text: '<i class="bx bxs-download" title="导出excel"></i>', extend: 'excel', title: 'XXX-XX详情信息表', //导出的excel标题 // className: 'btn btn-primary' //按钮的class样式 } ],
JQuery datatables 导出excel扩展
热门推荐
你好邱林和的专栏
12-30 2万+
之前做的前端网页内容的导出都是参考百度上的链接：http://blog.youkuaiyun.com/sinat_15114467/article/details/51098522，原理如下： 纯数据的，使用一个FileSaver.js，如果有浏览器不支持Blob的，还需要引入Blob.js，来做导出。HTML内容的，构造一个base64字符串的路径，跳转地址下载，其实也可以将数据抽出来，用纯数据的方式。但
行内编辑+自定义按钮导出
zhanhang666的博客
08-27 5556
1.bootstrap table的引入 &lt;link rel="stylesheet" href="css/bootstrap-table.min.css"&gt; &lt;script type="text/javascript" src="js/bootstrap-table.min.js"&gt;&lt;/script&gt; &lt;script type
datatable 导出无乱码中文pdf文件
qq_30076899的博客
03-29 5215
datatable 导出无乱码中文pdf文件 　　我一个前端程序员，最近老大要我出一个报表UI，并跟我说要支持pdf导出，因为这个报表数据回头要发给部门老大看，pdf显得正式点，然后，我就开始了各种找插件之旅。。。 开始尝试导出pdf文件 　　首先，介绍下我们的项目背景：UI使用datatable。当我去看datatable官网的时候，很高兴，有现成的导出插件：datatable导出插件...
dataTables——用图标替换buttons的原始样式
weixin_43235307的博客
12-08 795
原始button样式： 1、js代码 $(document).ready(function () { var table = $('#carousel_figure_table').DataTable({ buttons: ['copy', 'excel', 'pdf', 'print'], language:'data.json', iDisplayLength : 10,// 每页显示行数 dom:'Bftip'
dataTables导出功能
10-25
例如，以下代码片段展示了如何在DataTables中添加CSV和PDF导出按钮： ```javascript $(document).ready(function() { $('#example').DataTable({ dom: 'Bfrtip', buttons: [ 'csv', 'pdf' ] }); }); ``` 在...
前端项目-datatables-tabletools.zip
09-03
6. **兼容性**：与DataTables的其他插件良好兼容，如ColVis（列显示控制）和ColReorder（列排序）。 **使用Tabletools** 1. **安装**：首先确保引入了DataTables和jQuery库，然后引入Tabletools的CSS和JS文件。 2. ...
前端项目-datatables.zip
09-03
Datatables 是前端项目中不可或缺的工具，尤其在处理数据展示时。它的强大功能和高度可定制性使得它成为Web开发者的首选。无论你是新手还是经验丰富的开发者，都能在Datatables找到适合自己的解决方案，提升项目的...
Lighthouse Core Web Vitals 指标详解与优化指南
Programming Talk
05-13 808
Google 在 2020 年推出的 Core Web Vitals（核心网页指标）是衡量用户体验质量的关键指标集合，现已成为搜索引擎排名的重要因素。通过深入理解Lighthouse Core Web Vitals的计算原理，开发者可以更有针对性地优化网站性能，提升用户体验和搜索引擎排名。FID 测量从用户首次与页面交互（点击、触摸、按键）到浏览器实际能够响应该交互的时间。模拟与真实数据结合：Lighthouse 使用实验室数据模拟FID，但建议结合真实用户数据（通过Chrome用户体验报告）
如何使用 React Hooks 替代类组件的生命周期方法？
官方推荐
05-12 4476
如何使用 React Hooks 替代类组件的生命周期方法？
如何选择合适的企业级商城系统前端状态管理方案？
万米商云的博客
05-14 504
在复杂的电商场景中，前端状态管理是保障系统高性能、可维护性和数据一致性的核心环节。面对商品数据实时更新、多模块状态共享、高并发请求等挑战，如何选择合适的状态管理方案？
VsCode和AI的前端使用体验：分别使用了Copilot、通义灵码、iflyCode和Trae
Z_Joker_J的博客
05-16 425
本文介绍了四款AI编程助手插件：GitHub Copilot、通义灵码、iFlyCode和Trae。GitHub Copilot是老牌代码补全工具，深度集成于VSCode，支持多语言和复杂项目开发。通义灵码是阿里推出的免费编程助手，优势在于中文支持和教育场景，提供代码解释和优化建议。iFlyCode基于讯飞星火大模型，涵盖软件研发全流程，提供多种智能助理功能。Trae是字节跳动推出的AI集成开发环境，支持多模态和中文界面，提供AI驱动的开发体验。四款插件各有特点，开发者可根据需求选择适合的工具。
29、魔法微前端——React 19 模块化架构
m0_60414444的博客
05-16 337
"真正的魔法不在于改变世界，而在于如何优雅地组织代码" —— 霍格沃茨首席架构师。• 🧳 独立包裹机制：每个子应用独立构建部署。- Rust/C++跨语言编译优化。• ⏳ 时空预加载：子应用提前准备。- WASI接口与宿主环境交互"- SIMD指令集性能突破。- 高效内存管理策略。
Vuetify框架使用(一)之v-snackbar 组件封装及全局使用
小破孩的博客
05-15 233
Vuetify框架使用(一)之v-snackbar 组件封装及全局使用
Vue3中实现轮播图
最新发布
2301_77140685的博客
05-16 356
首先，什么是轮播图？轮播图是指提供【上一页】【下一页】进而能切换图片 , 这在前端页面中是十分常见的一个页面显示那么好 , 接下来我们看看具体的效果图，这是刚运行的效果：当我们点击下一页时，图片切换到下一张，并且点击上一页时，必须是之前的上一页。
DataTables数据导出与格式转换实战指南
1. **DataTables导出功能的实现原理**： DataTables本身是基于浏览器端的JavaScript库，因此它不能直接创建服务器端文件。当用户点击导出按钮时，DataTables会动态生成表格当前状态下的数据，并允许用户选择要导出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值