Datatables它是一款基于jQuery表格插件,钟情于它操作dom的灵活。做后台的同学想必使用它能事半功倍,而且交互强、容易扩展。

我也是最近要做公司后台界面,表格涉及的很多,所以考虑使用DT,刚上手(感觉还不错呢),不足之处欢迎指正!:)

datatables本身就提供了导出excel、csv、pdf等格式的功能,参考如下链接:https://datatables.net/extensions/buttons/examples/html5/excelTextBold.html(官方的例子导出excel,

有源码和所需引入的文件):https://datatables.net/extensions/buttons/examples/initialisation/export.html(导出csv/pdf/copy/打印) 可供参考。

1.所需引入的文件

1>.引入css文件:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css"/>

2>.引入js文件

  <script src="http://cdn.gbtags.com/datatables/1.10.5/js/jquery.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js "></script>
<script src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>

2.html代码

 <!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
<!-- 定义一个表格元素 -->
<table id="example" class="display nowrap" 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>
<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>
</tbody>
</thead>
</table>
</div>

3.js代码

$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
"buttons": [
{
'extend': 'excelHtml5',
'text': '导出excel',//定义导出excel按钮的文字
'exportOptions': {
'modifier': {
'page': 'current'
}
}
}
]
});
});

4.运行效果


dataTables的导出Excel功能的更多相关文章

  1. Atitit.导出excel功能的设计 与解决方案

    Atitit.导出excel功能的设计 与解决方案 1.1. 项目起源于背景1 1.2. Js  jquery方案(推荐)jquery.table2excel1 1.3. 服务器方案2 1.4. 详细 ...

  2. 项目笔记:导出Excel功能

    1.前台这块: var ids=""; $.post("${basePath}/assets/unRegDeviceAction_getDeviceIds.do" ...

  3. 项目笔记:导出Excel功能分sheet页插入数据

    导出Excel功能分sheet页处理数据: /*导出EXCEL*/ public void createExcel() { log.info("导出Excel功能已经启动-BEGIN&quo ...

  4. vue项目导出EXCEL功能

    因为一些原因导出EXCEL功能必须前端来做,所以就研究了一下,在网上也找了一些文章来看,有一些不完整,我做完了就记录下来,供大家参考: 1.首先先安装依赖: npm install file-save ...

  5. Vue通过Blob对象实现导出Excel功能

    不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入excel,这个时候就有很多插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Exc ...

  6. layui + mvc + ajax 导出Excel功能

    为了更方便,没基础的伙伴更容易理解,我尽量详细简便 省了很多代码,一步一步的试 自己引入文件 1. html 前端视图代码 Layui的数据绑定 全部代码 @{ Layout = null; } &l ...

  7. asp.net core web的导入导出excel功能

    这里主要记录下asp.net core web页面上进行导入导出excel的操作. 主要是导入,因为现在使用的很多前端框架(例如kendo ui)本身就有导出的功能. 这里使用到EPPlus.Core ...

  8. Django Admin中增加导出Excel功能

    参考: https://www.cnblogs.com/yoyo008/p/9232805.html 在使用Django Admin时, 对于列表我们有时需要提供数据导出功能, 如下图: 在Djang ...

  9. laravel-admin 自定义导出excel功能,并导出图片

    https://www.jianshu.com/p/91975f66427d 最近用laravel-admin在做一个小项目,其中用到了excel导出功能. 但是laravel-admin自带的导出功 ...

随机推荐

  1. 向 mysql 插入汉字时报错 Incorrect string value: '\xE6\x9B\xB9\xE5\x86\xAC...' for col....

    Incorrect string value: '\xE6\x9B\xB9\xE5\x86\xAC...' for column 'realname' at row 1 该情况一般是由数据库设计时的编 ...

  2. PHP-深入理解Opcode缓存

    1.什么是opcode缓存? 当解释器完成对脚本代码的分析后,便将它们生成可以直接运行的中间代码,也称为操作码(Operate Code,opcode).Opcode cache的目地是避免重复编译, ...

  3. MongoDB笔记(三):Document 数据插入、删除、更新

    实例数据库caliven.集合users 一.插入文档 1.插入文档 db.[documentName].insert({}) 2.批量插入文档 .shell 这样执行是错误的db.[document ...

  4. 《Mining the Web:Transforming Customer Data into Customer Value》读后札记

    <Mining the Web:Transforming Customer Data into Customer Value> <Web数据挖掘:将客户数据转化为客户价值> — ...

  5. js常用工具

    1.反编译工具 .NET Reflector 2.js检查工具 ReSharper 8.0.14.856 官方原版+注册机     JScript Editor Extensions     JSEn ...

  6. Android 四大组件学习之BroadcastReceiver二

    上节学习了怎样创建一个广播.也尝试接受系统打电话的广播. 本节课学习怎样自己定义广播.自己定义广播实质上也就是创建一个发送广播者,创建一个接受该广播者. 那我们就開始行动吧. 先创建一个发送广播的应用 ...

  7. [容器]python搭建简易服务器+docker导入多个镜像shell脚本

    从其他机器导出来的docker镜像,集中地放在某台上,其他的机器执行 curl xxx:8000/load_images.sh 来导入镜像,简单方便 使用python简易web服务器. (在镜像目录下 ...

  8. CSS3主要知识点复习总结+HTML5新增标签

    文件夹: 1.CSS 属性编写顺序 2.CSS3属性(内核前缀) 3.position相对/绝对定位 4.overflow:scroll等的差别 5.display属性应用 6.盒模型计算方法和Bug ...

  9. 使用maven结合requirejs管理前端脚本

    已有的web项目,一直使用Maven做工程管理,现阶段前端调整为使用requirejs来负责模块加载依赖,同时使用jasmine来完成前端的UT. 便与在maven下统一管理,简单整理了下合在一起的使 ...

  10. start-stop-daemon

    start-stop-daemon是OpenRC计划的一部分,这个程序最先出现在Debian系的Linux发行版中,这里有个比较古老的手册页面,更详细更直观的办法当然是通过man start-stop ...