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. （四）EasyUI 使用——form表单2 & window窗口

    form表单组件主要有以下内容(如下图)      6. progressbar进度条  每隔1秒让进度条按随机数填充,直至充满进度条刻度(只能执行一次) 进度条: <div id=" ...

  2. <转>多线程中的lua同步问题

    转自 http://www.cnblogs.com/ghost240/p/3526185.html 最近写paintsnow::start时出现了一个非常麻烦的BUG,程序的Release版本大约每运 ...

  3. Pycharm 安装scrapy

    因为scrapy需要依赖第三方的包,所以直接使用Pycharm安装Scrapy包无法安装成功.网上已经有很多使用cmd安装scrapy的优秀教程,此处不再介绍. 基于下图所示的结构之下向上即可完成sc ...

  4. linq-to-sql实现left join，group by，count

    linq-to-sql实现left join,group by,count 用linq-to-sql实现下面的sql语句: SELECT p.ParentId, COUNT(c.ChildId) FR ...

  5. Windows RabbitMQ 添加用户、设置角色和权限 （包含无法添加的错误处理）

    添加账号密码 rabbitmqctl.bat add_user test 123456 添加角色 rabbitmqctl.bat set_user_tags test administrator 授权 ...

  6. Atitit .c#的未来新特性计划草案

    Atitit .c#的未来新特性计划草案 1. C#的未来:追踪空引用1 1.1. 2. 变量命名空间1 1.2. 10. 项目引用Native dll2 1.3. 10. 项目引用Native dl ...

  7. 李洪强漫谈iOS开发[C语言-003]-开发概述程序设计语言

    李洪强iOS开发之程序设计语言 printf 是打印的意思- 格式化输出 f: format 格式化 C语言编译器 编译器的功能就是将高级语言的源代码,翻译成机器可以识别的二进制文件就是可执 行文件- ...

  8. error C2998: 'XXXXXXX' : cannot be a template definition 的可能原因。

    从错误信息的字面意思可以看出来是 XXXXX 不能作为模板定义. 但是为什么不能,并没有说明,最后我翻阅各种资料,各种尝试后,发现往往可能是由于找不到模板函数的某个参数的定义而导致的. templat ...

  9. 关于Python的Object继承

    今天在Coding的使用,使用了python的单例模式,发现了一个很有趣的问题. class x(object): __se = None a = None def __new__(cls): if ...

  10. Java进阶02 异常处理（转载）

    异常处理 Java的异常处理机制很大一部分来自C++.它允许程序员跳过暂时无法处理的问题,以继续后续的开发,或者让程序根据异常做出更加聪明的处理. Java使用一些特殊的对象来代表异常状况,这样对象称 ...