Search code examples
javascriptjquerycsvtablesorterjquery-csv

Process CSV text within the DOM - JQuery CSV to Table

Right now I am using javascript to get a csv file located on my server, process the data within the file, and print the result onto the webpage (in table format).

Instead of getting a local csv file, I need to just manually insert the csv data directly inline for processing.

Here is my code:

<script>
  $(function() {
    $.ajaxSetup({ mimeType: "text/plain" });
    $('#CSVTable').CSVToTable('https://www.example.com/files/test.csv',
        {
          loadingImage: 'https://www.example.com/images/loading.gif',
          headers: ['Plan Information', '&nbsp;'],
          startLine: 0,
          separator: ","
        });
  });
</script>

<div id="CSVTable"></div>

Can someone please help me figure out a way to specify the csv data directly within the code, instead of grabbing a file? Ideally, I would like to have the CSV data in a div - and then somehow use JS to process the csv data within that div.

FYI: I am using https://code.google.com/p/jquerycsvtotable/

I was thinking of using https://github.com/evanplaice/jquery-csv as well to parse the CSV within the div, but it doesn't seem to work.

Any help is greatly appreciated.

EDIT:

I have used Mottie's Inline CSV Example, however it still does not seem to work for me.
Here is my code:

<html>
<head>
<!-- jQuery -->
<script src="https://www.example.com/tablesorter/dist/js/jquery-1.10.2.min.js"></script>

<!-- Tablesorter: required -->
<link rel="stylesheet" href="https://www.example.com/tablesorter/dist/css/theme.blue.css"> <!-- choose any theme -->
<script src="https://www.example.com/tablesorter/dist/js/jquery.tablesorter.js"></script>

<!-- build table widget -->
<script type="text/javascript" src="https://www.example.com/tablesorter/dist/js/widgets/widget-build-table.js"></script>
</head>
<body>
<!--
 Note: if the csv data contains commas ("10,000 days") wrap it in quotes
-->
<div class="csv" style="display:none;">
  Album,Artist,Price (USD)
  Lateralus,Tool,$13.00
  Aenima,Tool,$12.00
  "10,000 days",Tool,$14.00
  Down In It,Nine Inch Nails,$3.00
  Broken,Nine Inch Nails,$6.00
  Muse,Black Holes and Revelations,$7.00
  Anon,"fake album, with comma", $1.00
  Album,Artist,Price (USD)
</div>

<div id="csv2Table"></div>

<script>
$(function() {
  $('#csv2Table').tablesorter({
    theme: 'blue',
    widgets: ['zebra'],
    widgetOptions: {
      // *** build widget core ***
      build_type      : 'csv',
      build_source    : $('.csv'),
      build_complete  : 'tablesorter-build-complete', // triggered event when build completes

      // *** CSV & array ***
      build_headers   : {
        rows    : 1,   // Number of header rows from the csv
        classes : [],  // Header classes to apply to cells
        text    : [],  // Header cell text
        widths  : ['3%', '27%', '50%', '20%'] // set header cell widths
      },
      build_footers : {
        rows    : 1,   // Number of header rows from the csv
        classes : [],  // Footer classes to apply to cells
        text    : []   // Footer cell text
      },
      build_numbers : {
        addColumn : "#", // include row numbering column?
        sortable  : true // make column sortable?
      },

      // *** CSV options ***
      build_csvStartLine : 0,  // line within the csv to start adding to table
      build_csvSeparator : "," // csv separator
    }
  });
});
</script>
</body>
</html>

Any suggestions would be greatly appreciated! Thanks.

Solution

  • If you use my fork of tablesorter, there is a build widget which supports CSV to table via ajax. The build widget has the CSVToTable code built-in, so the options include the options from that plugin.

    CSV

    Album,Artist,Price ($)
Lateralus,Tool,$13.00
Aenima,Tool,$12.00
"10,000 days",Tool,$14.00
Down In It,Nine Inch Nails,$3.00
Broken,Nine Inch Nails,$6.00
Muse,Black Holes and Revelations,$7.00
Anon,"fake album, with comma", $1.00
Album,Artist,Price ($)

    HTML

    <div id="csv2Table"></div>

    Script

    $(function() {
  $('#csv2Table').tablesorter({
    theme: 'blue',
    widgets: ['zebra'],
    widgetOptions: {
      // *** build widget core ***
      build_type      : 'csv',
      build_source    : { url: 'assets/csv.txt', dataType: 'text' },
      build_headers   : {
        widths  : ['30%', '50%', '20%'] // set header cell widths
      }
    }
  });
});