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. mongo views

    db.itemsView.drop(); db.items.aggregate([ { "$match": { "status": "true&quo ...

  2. Codeforces Round #240 (Div. 1)B---Mashmokh and ACM(水dp)

    Mashmokh's boss, Bimokh, didn't like Mashmokh. So he fired him. Mashmokh decided to go to university ...

  3. 内核调试神器SystemTap — 探測点与语法（二）

    a linux trace/probe tool. 官网:https://sourceware.org/systemtap/ 探測点 SystemTap脚本主要是由探測点和探測点处理函数组成的,来看下 ...

  4. Unix 环境高级编程

    UNIX 环境高级编程 本书描述了UNIX系统的程序设计接口--系统调用接口和标准C库提供的很多函数. 与大多数操作系统一样,Unix为程序员运行提供了大量的服务--打开文件,读文件,启动一个新程序, ...

  5. NSCondition(转)

    NSConditionLock 继承类NSObject 遵从的协议NSLocking NSObject NSConditionLock 类定义特定的.用户定义的条件锁 协议NSLocking 方法 l ...

  6. 快速上手UIView动画

    UIView动画有两种使用方法 UIView [begin commit]模式 //动画开始标记 [UIView beginAnimations:@"changeframe" co ...

  7. Trees on the level UVA - 122 复习二叉树建立过程，bfs，queue，strchr，sscanf的使用。

    Trees are fundamental in many branches of computer science (Pun definitely intended). Current state- ...

  8. ios 应用多语言自由切换实现

    第一次进入应用获取本机语言.1.假设本机语言在软件实现语言列表里.则默认选中本机语言,可是用户还是能够选择其他语言.2.假设本机语言不在软件实现语言列表里,则默认选中英语.用户还是能够选择其他语言. ...

  9. liunx系统安装composer与配置

    1.下载composer curl -sS https://getcomposer.org/installer | php 2.我把它放在系统的PATH目录中,这样就能在全局访问它. mv compo ...

  10. 单点登录SSO简介

    一.什么是单点登录SSO(Single Sign-On) SSO是一种统一认证和授权机制,指访问同一服务器不同应用中的受保护资源的同一用户,只需要登录一次,即通过一个应用中的安全验证后,再访问其他应用 ...