Process CSV text within the DOM - JQuery CSV to Table

Question

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.

CSV file is just a simple text, delimited with e.g. comma or semicolon. Just open your file in a notepad and copy-paste the content to JS variable. — Thomas Weglinski, Jun 26 '15 at 14:34
My CSV file contains quotations, and it seems to be interfering with the JS variable. Would you mind posting an example? I really appreciate it. — NickyTheWrench, Jun 26 '15 at 14:40
As I understand CSVToTable functions first variable is the file path and as I get it from its source code, it is using jquery ajax get method for grabbing it from your server: `$.get(csvFile, function(data) { ... });`. As said @thomas-weglinski you can define the csv data in you js file, storing it in string variable, but you need to modify the source code of csvToTable to prevent it from grabbing data from your server, but from the local variable. — Hett, Jun 26 '15 at 14:41
You could create the function `csvToTable2` by modifying the original code of `CSVToTable` in https://jquerycsvtotable.googlecode.com/svn/trunk/js/jquery.csvToTable.js ... — Héctor E, Jun 26 '15 at 14:44
@NickyTheWrench Unfortunately, special characters like quotations or newlines should be escaped by \. Please refer to: http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript There is a plenty of good practices. For testing purposes, I suggest you to copy/paste only few lines of CSV file to a JS variable. — Thomas Weglinski, Jun 26 '15 at 14:48
Would anyone mind being a little more specific? Is there a method that doesn't involve breaking up the individual lines of the CSV? I'm a bit of a noobie. Thank you again! — NickyTheWrench, Jun 26 '15 at 15:10
time to close this! but after that you should check out http://handsontable.com — Rooster, Jun 26 '15 at 18:55

score 0 · Accepted Answer · answered Jun 26 '15 at 22:21

0

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

answered Jun 26 '15 at 22:21

Mottie

84,355
30
126
241

Mottie - thanks a lot for chiming in here. I hoped you would. Is there any way I can do this without calling an external txt file? I really need to process CSV that is inline, perhaps inside of a div. – NickyTheWrench Jun 27 '15 at 02:27
The [Inline CSV demo](http://mottie.github.io/tablesorter/docs/example-widget-build-table.html#setup__csv_txt_within_dom_element) is the demo immediately before the ajax one (in the accordion). – Mottie Jun 27 '15 at 12:50
please see my updated question. Thanks again for your help on this. – NickyTheWrench Jun 29 '15 at 05:24
Make sure jQuery, tablesorter, then the build widget are all loaded, in that order. Also, make sure there are no javascript errors (press F12 to open the development window). – Mottie Jun 29 '15 at 20:25

Process CSV text within the DOM - JQuery CSV to Table

1 Answers1