javascript - 我正在尝试使显示的表格(使用数据表)以 csv 格式下载

Question

我被分配了一项显示表格的任务(列应该是可搜索和可排序的。)由于我基本上没有 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，所以我希望将来能够从头开始编写代码。

Answer 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'
     });
 }

}

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