码迷,mamicode.com
首页 > 其他好文 > 详细

使用DataTables导出excel表格

时间:2016-07-01 16:01:35      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

一、首先在<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会在网页上打印出表格内容。

文章转自:http://www.tuicool.com/articles/ArEz63

使用DataTables导出excel表格

标签:

原文地址:http://www.cnblogs.com/liyuhuan/p/5633095.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!