How to create HTML data tables from dynamic csv files of a folder

Question

I was wondering how to create HTML data tables from multiple CSV file.

For example, I have a folder containing CSV files named "Data_Source1-Memory.csv", "Data_Source1-CPU.csv", Data_Source1-Disk.csv", Data_Source2-Memory.csv" and "Data_Source2-CPU.csv" .

These files are created dynamically depending on the "Data_Source1" or "Data_Source2". So, every time it will not necessarily have Memory or CPU or Disk CSV files.

Is there a way I can cycle through these csv files for "Data_Source1" and present these in a HTML table ( one table for Memory, one table for Disk and one table for CPU ). Then cycle through the folder for "Data_Source2" and present these csv as HTML tables.

So far all I can find is jQuery plugins , that as far as I can test will only work for static csv files or data (eg DataTables).

I also know what files exist so I don't have to search to see if there is a file, I know which files I need. I just don't know how to loop through different csv files to produce a table per csv file.

Any help or advice would be much appreciated.

Answer 1

As long as the server directory has directory listings enabled, and you run your script from within the domain, then there should be no problems by collecting a list of certain files from a certain directory. Simply use $.ajax and parse filenames out of the retrieved directory listing HTML page. The below works on a standard 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);
            }
        })
    }
})

The result is a files array containing

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

You can use files.sort() if you want the list of files to be in numeric order. Now it should be a nobrainer to use files as base for an automatically created dataTable - see Create dataTable column definition from uploaded csv data - cycle through files and insert the data from each CSV instead of a single file as in the answer.