gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 05:40:17 25 4
gpt4 key购买 nike

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

最佳答案

我有下一个代码,用于从数据表生成 .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'
});
}

}

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

关于javascript - 我正在尝试使显示的表格(使用数据表)以 csv 格式下载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31199908/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com