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. iOS开发－项目的完整重命名方法，图文教程。

    前言:在IOS开发中,有时候想改一下项目的名字,都会遇到很多麻烦.直接改项目名吧,XCODE又不会帮你改所有的名字.总是有很多文件.文件夹或者是项目设置的项.而且都是不能随便改的,有时候改着改着,编译 ...

  2. ios 中尝试多次请求

    -(void)tryRun { tryTimes++; id obj = [ASODataManager getAppleAccount]; if (obj) { __block FirstViewC ...

  3. chrome扩展(浏览器插件)开发实用教程

    原创文章,转载请注明出处. 作者:简体字丶冯; QQ:564372931 1．Chrome能搞这些事情 (1)     操作浏览器中打开的页面DOM 这能做什么哪?譬如说你想修改页面DOM(DOM是什 ...

  4. Sql中的内连接，左连接以及右连接区别

    转自:http://pangaoyuan.javaeye.com/blog/713177 有两个表A和表B. 表A结构如下: Aid:int:标识种子,主键,自增ID Aname:varchar 数据 ...

  5. RabbitMQ基础概念

    转至:http://blog.csdn.net/whycold/article/details/41119807 RabbitMQ简介 AMQP,即Advanced Message Queuing P ...

  6. javascript执行环境以及作用域链的理解

    在javascript脚步语言中执行环境有两种: 全局环境: 局部环境: 我们可以拿一个田径跑道来打比方,全局环境就可以理解为是最外面跑道,它包含着内部所有的东西,有人在跑步,有人在跳远,这些用着不同 ...

  7. http加密原理

    HTTPS原理 客户端向服务器发送请求 服务器向客户端发送自己的证书 客户端验证证书的有效性(是否是可信用机构CA颁发的证书,如果不是则提出警告)并对比里面信息是否正确,不通过则立刻断开连接 向服务器 ...

  8. mongodb更新器

    Name Description $inc Increments the value of the field by the specified amount. $mul Multiplies the ...

  9. 分布式服务框架 Zookeeper（三）官方入门指南

    入门指南:使用ZooKeeper来协调分布式应用 这篇文档包含了让你快速上手ZooKeeper的信息.主要是针对那些想要试一把ZooKeeper的开发人员,包含了安装一个单一ZooKeeper服务器的 ...

  10. Appium python自动化测试系列之元素的定位(六)

    ​6.1 常用定位方法讲解 对象定位是自动化测试中很关键的一步,也可以说是最关键的一步,毕竟你对象都没定位那么你想操作也不行.所以本章节的知识我希望大家多动手去操作,不要仅仅只是书本上的知识,毕竟这个 ...