jQuery Plugin for Converting CSV/TSV To Table - CSVToTable

File Size: 22.1 KB
Views Total: 9047
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin for Converting CSV/TSV To Table - CSVToTable

CSVToTable is a simple jQuery plugin which dynamically generate a table from a CSV (comma separated values) or TSV (tab separated values) file.

See also:

How to use it:

1. Include jQuery library and the jQuery CSVToTable plugin on your html page.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/jquery.csvToTable.js"></script>

2. Create an empty container to place the Html table.

<div id="demo"> </div>

3. Call the plugin on the container and provide the path to the CSV/TSV file.

$(function() {
  $('#demo').CSVToTable('1.csv');
});

4. Default options.

$('#demo').CSVToTable('1.csv',{

// class name to apply to the <table> tag
tableClass: "CSVTable",

// class name to apply to the <thead> tag
theadClass: "",

// class name to apply to the <th> tag
thClass: "",

// class name to apply to the <tbody> tag
tbodyClass: "",

// class name to apply to the <tr> tag
trClass: "",

// class name to apply to the <td> tag
tdClass: "",

// path to an image to display while CSV/TSV data is loading
loadingImage: "",

// text to display while CSV/TSV is loading
loadingText: "Loading CSV data...",

// separator to use when parsing CSV/TSV data
separator: ",",

startLine: 0

});

5. Upon completion, the plugin triggers a "loadComplete" event so that you may perform other manipulation on the table after it has loaded. A common use of this would be to use the jQuery tablesorter plugin. An example of such a call would be as follows, assuming you have loaded the tablesorter plugin.

$('#demo').CSVToTable('1.csv', { 
  loadingImage: 'images/loading.gif', 
  startLine: 1,
  headers: ['Album Title', 'Artist Name', 'Price ($USD)']
 }
).bind("loadComplete",function() { 
$('#demo').find('table').tablesorter();
});;

This awesome jQuery plugin is developed by bbgunmaster. For more Advanced Usages, please check the demo page or visit the official website.