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. 轻量级代码生成器-OnlyCoder 第一篇

    程序猿利器:代码生成器,使用代码生成器已经好几年了,增删改查各种生成,从UI到DATA层均生成过.之前有使用过动软的,T4模板等....  T4生成实体还是没有问题的,但是生成MVC视图就有点烦杂了, ...

  2. linux 设置tomcat快捷启动方式

    在linux下搭建好tomcat之后,每次启动和关闭都要去tomcat的bin目录下执行./startup.sh和./shutdown.sh 这是很不方便的,下面介绍如何像执行ls mv cp等命令一 ...

  3. Fiddler4插件开发实践

    Fiddler4 是一款 巴拉巴拉..... 连接在这:http://www.telerik.com/fiddler 开发文档在这:http://docs.telerik.com/fiddler/Ex ...

  4. 10710 - Chinese Shuffle(数论+完美洗牌)

    UVA 10710 - Chinese Shuffle 题目链接 题意:给定n张牌,完美洗牌n - 1次,问是否会变回原来的序列 思路:完美洗牌: 如果有a1a2a3...anb1b2b3...bn的 ...

  5. rocketmq发送消息代码

    DefaultMQProducer defaultMQProducer = new DefaultMQProducer(); defaultMQProducer.setProducerGroup(Co ...

  6. C# Post Json数据到对方url

    1. /// <summary> /// 调用对方Url,Post上传数据 /// </summary> /// <param name="postData&q ...

  7. C++语言基础(15)-友元函数和友元类

    一个类中可以有 public.protected.private 三种属性的成员,通过对象可以访问 public 成员,只有本类中的函数可以访问本类的 private 成员.现在,我们来介绍一种例外情 ...

  8. mysql之log-slave-updates参数

    1.引言 使用Mysql的replication机制实现主从同步时,其是由三个线程实现了,主库一个I/O线程,从库一个I/O线程和一个SQL线程.配置时主库需要开始bin-log参数,即在配置文件中添 ...

  9. linux跨主机复制文件

    scp -r billing@10.200.171.111:/billdata2/user/yanhm/redis/* /newboss/billing/user/aabb 其中: 10.200.17 ...

  10. 【ASP.NET】——AdRotator控件

    AdRotator控件即广告控件. 广告,是站点不可缺少的一部分.也是站点获取收益的最主要途径,但最初制作广告非常麻烦.asp.net就将该方法封装成了一个控件.为我们节省了非常多时间.这也是ASP. ...