如何从文件夹的动态 csv 文件创建 HTML 数据表

Posted 2023-05-09

【中文标题】如何从文件夹的动态 csv 文件创建 HTML 数据表

【英文标题】：How to create HTML data tables from dynamic csv files of a folder

【发布时间】：2016-05-22 00:25:48

【问题描述】：

我想知道如何从多个 CSV 文件创建 html 数据表。

例如，我有一个包含名为 "Data_Source1-Memory.csv", "Data_Source1-CPU.csv", Data_Source1-Disk.csv", Data_Source2-Memory.csv" and "Data_Source2-CPU.csv" 的 CSV 文件的文件夹。

这些文件是根据“Data_Source1”或“Data_Source2”动态创建的。所以，每次它不一定有内存或 CPU 或磁盘 CSV 文件。

有没有办法可以循环浏览“Data_Source1”的这些 csv 文件并将它们呈现在 HTML 表中 (one table for Memory, one table for Disk and one table for CPU)。然后循环浏览“Data_Source2”文件夹并将这些 csv 呈现为 HTML 表格。

到目前为止，我只能找到jQuery plugins，据我所知，它仅适用于静态 csv 文件或数据（例如 DataTables）。

我也知道存在哪些文件，所以我不必搜索是否有文件，我知道我需要哪些文件。我只是不知道如何遍历不同的 csv 文件来为每个 csv 文件生成一个表。

任何帮助或建议将不胜感激。

【问题讨论】：

你不能这样做，因为 javascript 不能自己获取文件夹中的文件列表。您将需要运行一些服务器，该服务器要么根据请求构建此 HTML 页面，要么至少提供文件夹内容

get a list of all folders in directory的可能重复

@smnbbrv 我可以访问 Data_Sources 的每个相关标题（即内存、CPU、磁盘）的列表。所以如果有帮助，我知道哪些文件存在或不存在

您是否尝试使用纯客户端代码来执行此操作？

@markpsmith 是的，我希望这一切都在我的机器上本地工作

【参考方案1】：

只要服务器目录启用了目录列表，并且您从域内运行脚本，那么从某个目录收集某些文件的列表应该没有问题。只需使用$.ajax 并从检索到的目录列表 HTML 页面中解析文件名。以下适用于标准 apache：

var fileMask = '-CPU', //signature of the files
    fileExt = 'csv'; //file extension
$.ajax(
    url: 'path/to/directory/',
    success: function (data) 
        var file, files = [];
        $('a[href]', data).each(function(i, a) 
            file = $(a).attr('href');
            if (~file.indexOf(fileMask) && file.match(/[^.]+$/) == fileExt) 
                files.push(file);
            
        )
    
)

结果是一个包含

的files 数组

['Data_Source1-CPU.csv', 'Data_Source2-CPU.csv', 'Data_Source3-CPU.csv']

如果您希望文件列表按数字顺序排列，您可以使用files.sort()。现在，使用files 作为自动创建的数据表的基础应该是明智之举 - 请参阅Create dataTable column definition from uploaded csv data - 循环浏览files 并插入来自每个 CSV 的数据而不是答案中的单个文件。