我正在尝试使表格以 csv 格式显示（使用 Datatables）答案

【问题标题】：I am trying to make the table displayed (using Datatables) downloadable in csv format我正在尝试使表格以 csv 格式显示（使用 Datatables）
【发布时间】：2015-09-20 21:18:59
【问题描述】：

我被分配了一项任务来显示一个表格（列应该是可搜索和可排序的。）由于我基本上没有使用 javascript 或 Jquery 的经验，所以我决定使用其中一个可用的插件并使用 DataTables。这是该文件的链接。

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>

现在，我希望能够提供一个选项，以下载以 .csv 格式显示的内容。我需要确保他们只能下载他们搜索的结果，而不是整个表格。

我一直在使用下面的代码来实现搜索/排序表。

<script type="text/javascript">
        $(document).ready(function(){
            $("#table_id thead th").each (function(){
                var title = $("#table_id thead th").eq( $(this).index()).text();
                $(this).html (' <input type = "text" placeholder = "Search '+title+'"/> ');
            });

            var table = $('#table_id').DataTable();

            table.columns().every(function(){
                var that = this;

                $( 'input', this.header() ).on ( 'keyup change', function(){
                    that
                        .search( this.val() )
                        .draw();
                } );
            });

        });

    </script>

如果有人可以告诉我如何实现该功能或将我指向具有所需选项的其他插件，那将非常有帮助。

Ps：我现在刚开始学习javascript，所以我希望将来能够从头开始编写代码。

【问题讨论】：

如果您不反对在您的页面中使用一点闪存，那么 TableTools (datatables.net/extensions/tabletools) 可以提供您所需要的 - 以及更多！真的是破解工具！或者，您需要在页面中引入一个按钮/链接，该按钮/链接调用服务器端脚本以适当格式生成数据。尽管非常可行，但这并不容易。您将能够使用 API 从表中获取相关的分页数据，但同样，这不是微不足道的 - 而 TableTools 可以为您完成这一切。
几天前我尝试使用该扩展程序。但是，它没有按预期工作，我下载的文件曾经包含一些源代码，所以我没有使用它。（我接近第一部分的截止日期。）我会尝试再次使用它并让你知道。感谢您的提示。

标签： javascript php jquery csv datatables

【解决方案1】：

我有下一个代码从数据表生成 .csv 以供下载，对记录进行过滤和排序。

function exportcsv(){
var tabledata = $('selectorJquery').DataTable();
var table = tabledata._('tr', {"filter": "applied"});
var columns = tabledata.dataTableSettings[0].aoColumns;
var tableString = "";

//Get the title headers and add to the first line of .csv
$.each(columns, function(i,v) { 
    tableString += v.sTitle+";";
    });
//Add line break and get the length of rows and the length of cols
tableString += "\r\n";
var rowLength = table.length;
var colLength = table[0].length;
//Iterate all rows and cols
for (var j = 0; j < rowLength; j++) {
    for (var k = 0; k < colLength; k++) {
        tableString += (k==colLength)  ?  table[j][k] : table[j][k]+";";
    }
    tableString += "\r\n";
}
  //Put the headers of file, application/csv and charset UTF-8 with BOM and the string with data rows
   csvData = 'data:application/csv;charset=utf-8,\uFEFF' + encodeURIComponent(tableString);
    var d = new Date();
     //Here I put in href attribute of a <a> HTML element and the .csv file starts to download automatically with name=yyyy-mm-dd_hh-mm-ss.csv
     $('selectorJquery').attr({
         'href': csvData,
         'target': '_blank',
         'download': d.getFullYear()+"-"+("0" + d.getMonth()).slice (-2)+"-"+("0" + d.getDate()).slice (-2)+"_"+("0" + d.getHours()).slice (-2)+"-"+("0" + d.getMinutes()).slice (-2)+"-"+("0" + d.getSeconds()).slice (-2)+'.csv'
     });
 }

}

希望这个功能可以帮助您解决问题。

【讨论】：