zoukankan      html  css  js  c++  java
  • 使用DataTables导出html表格

      去年与同事一起做一个小任务,需要把HTML表格中的数据导出到Excel。用原生js想要实现,只有IE浏览器提供导出到微软的Excel的接口,这就要求你电脑上必须安装IE浏览器、Excel,而且必须修改IE浏览器的默认设置,这让电脑上没安装IE浏览器与不喜欢用IE浏览器的人情何以堪。今天我向大家介绍DataTables插件,它是基于jQuery的,它可以兼容所有主流浏览器。

      DataTables插件有很多配件,如AutoFillColReorder等,想要导出Excel表格必须的配件就是TableTools。网上也有很多介绍DataTables的,可是基本上是对DataTables官方教程的翻译,并没有告诉你该怎么引入这个插件。今天的这篇文章就是介绍怎么引入这个插件的。

      先到官网http://www.datatables.net/下载插件,最新版本是DataTables-1.9.4。解压文件得到DataTables-1.9.4文件夹,打开文件夹你会发现里面有很多的文件,其实要用到的只是其中一些。下面介绍怎么引入这些文件。

    一、首先在<head>标签中引入下面的样式表。

    <style>
        @import "DataTables-1.9.4/media/css/demo_page.css";
        @import "DataTables-1.9.4/media/css/demo_table.css";
        @import "DataTables-1.9.4/media/css/demo_table_jui.css";
    
        @import "DataTables-1.9.4/extras/TableTools/media/css/TableTools.css";
        @import "DataTables-1.9.4/extras/TableTools/media/css/TableTools_JUI.css";
    </style>

    二、在</body>标签前面(这个是个人习惯,你也可以不放在这边)引入下面的javascript。

    <script src="DataTables-1.9.4/media/js/jquery.js"></script>
    <script src="DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
    <script src="DataTables-1.9.4/extras/TableTools/media/js/TableTools.min.js"></script>

      引入这些文件是一个难点,因为DataTables-1.9.4文件夹中的文件很多,不知道该引入哪些,这是写这篇文章的主要目的。

      再讲一下怎样调用接口。DataTables是通过$("#" + id).dataTable()接口来调用的,其中id是table中的id属性值。下面是我调用接口的代码:

    toExcel: function (id) {
            $("#" + id).dataTable({
                "bJQueryUI": false,
                'bPaginate': false, //是否分页
                "bRetrieve": false, //是否允许从新生成表格
                "bInfo": false, //显示表格的相关信息
                "bDestroy": true,
                "bServerSide": false,
                "bProcessing": true, //当处理大量数据时,显示进度,进度条等
                "bFilter": false, //搜索框
                "bLengthChange": false, //动态指定分页后每页显示的记录数
                "bSort": false, //排序
                "bStateSave": false, //缓存
                "sAjaxDataProp": "data",
                "sDom": 'T<"clear">lfrtip'
                "oTableTools": {
                    "sSwfPath": "DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
                }
            } );
        }    

      首先得在html<table>标签中加上一个id属性,然后把id值传给上面这个函数(这个封装函数可以自己写),最后再调用这个函数就可以了。想知道函数的各个属性是什么意思,可以阅读http://www.cnblogs.com/nier/archive/2012/03/18/2404836.html,里面有所有属性的介绍。

      这是我所做任务的效果图:

      

       图片上方有一排按钮,下方是从服务器获取的数据表格。点击图片上方的Copy可以复制表格内容,点击CSV、Excel生成的都是csv格式的文件,可以用Excel或wps打开,点击PDF生成pdf文件,点击Print会在网页上打印出表格内容。

      这篇文章就写到这边了,希望这篇文章能帮助到一些想把html表格数据导出到Excel的朋友。

  • 相关阅读:
    【转】利用MVC模式开发Java应用程序[组图]
    [转]JAVA三大框架SSH和MVC
    二进制转十进制
    MPlayerX For Mac白屏问题
    输入法切换设置
    【学习笔记】【C语言】选择结构-switch
    【学习笔记】【C语言】选择结构-if
    【学习笔记】【C语言】流程控制
    Mac OS X中开启或关闭显示隐藏文件
    Xcode6 模拟器不显示键盘
  • 原文地址:https://www.cnblogs.com/xljzlw/p/3661163.html
Copyright © 2011-2022 走看看