一、首先在<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