|
|
e8ec7a |
/**
|
|
|
e8ec7a |
* CSV to Table plugin
|
|
|
e8ec7a |
* http://code.google.com/p/jquerycsvtotable/
|
|
|
e8ec7a |
*
|
|
|
e8ec7a |
* Copyright (c) 2010 Steve Sobel
|
|
|
e8ec7a |
* http:
|
|
|
e8ec7a |
*
|
|
|
e8ec7a |
* v0.9 - 2010-06-22 - First release.
|
|
|
e8ec7a |
*
|
|
|
e8ec7a |
* Example implementation:
|
|
|
e8ec7a |
* $('#divID').CSVToTable('test.csv');
|
|
|
e8ec7a |
*
|
|
|
e8ec7a |
* The above line would load 'test.csv' via AJAX and render a table. If
|
|
|
e8ec7a |
* headers are not specified, the plugin assumes the first line of the CSV
|
|
|
e8ec7a |
* file contains the header names.
|
|
|
e8ec7a |
*
|
|
|
e8ec7a |
* Configurable options:
|
|
|
e8ec7a |
* separator - separator to use when parsing CSV/TSV data
|
|
|
e8ec7a |
* - value will almost always be "," or "\t" (comma or tab)
|
|
|
e8ec7a |
* - if not specified, default value is ","
|
|
|
e8ec7a |
* headers - an array of headers for the CSV data
|
|
|
e8ec7a |
* - if not specified, plugin assumes that the first line of the CSV
|
|
|
e8ec7a |
* file contains the header names.
|
|
|
e8ec7a |
* - Example: headers: ['Album Title', 'Artist Name', 'Price ($USD)']
|
|
|
e8ec7a |
* tableClass - class name to apply to the tag rendered by the plugin.
|
|
|
e8ec7a |
* theadClass - class name to apply to the tag rendered by the plugin.
|
|
|
e8ec7a |
* thClass - class name to apply to the tag rendered by the plugin.
|
|
|
e8ec7a |
* tbodyClass - class name to apply to the tag rendered by the plugin.
|
|
|
e8ec7a |
* trClass - class name to apply to the tag rendered by the plugin.
|
|
|
e8ec7a |
* tdClass - class name to apply to the tag rendered by the plugin.
|
|
|
e8ec7a |
* loadingImage - path to an image to display while CSV/TSV data is loading
|
|
|
e8ec7a |
* loadingText - text to display while CSV/TSV is loading
|
|
|
e8ec7a |
* - if not specified, default value is "Loading CSV data..."
|
|
|
e8ec7a |
*
|
|
|
e8ec7a |
*
|
|
|
e8ec7a |
* Upon completion, the plugin triggers a "loadComplete" event so that you
|
|
|
e8ec7a |
* may perform other manipulation on the table after it has loaded. A
|
|
|
e8ec7a |
* common use of this would be to use the jQuery tablesorter plugin, found
|
|
|
e8ec7a |
* at http:
|
|
|
e8ec7a |
*
|
|
|
e8ec7a |
* An example of such a call would be as follows, assuming you have loaded
|
|
|
e8ec7a |
* the tablesorter plugin.
|
|
|
e8ec7a |
*
|
|
|
e8ec7a |
* $('#CSVTable').CSVToTable('test.csv',
|
|
|
e8ec7a |
* {
|
|
|
e8ec7a |
* loadingImage: 'images/loading.gif',
|
|
|
e8ec7a |
* startLine: 1,
|
|
|
e8ec7a |
* headers: ['Album Title', 'Artist Name', 'Price ($USD)']
|
|
|
e8ec7a |
* }
|
|
|
e8ec7a |
* ).bind("loadComplete",function() {
|
|
|
e8ec7a |
* $('#CSVTable').find('TABLE').tablesorter();
|
|
|
e8ec7a |
* });;
|
|
|
e8ec7a |
|
|
|
e8ec7a |
*
|
|
|
e8ec7a |
*/
|
|
|
e8ec7a |
|
|
|
e8ec7a |
|
|
|
e8ec7a |
(function($){
|
|
|
e8ec7a |
|
|
|
e8ec7a |
/**
|
|
|
e8ec7a |
*
|
|
|
e8ec7a |
* CSV Parser credit goes to Brian Huisman, from his blog entry entitled "CSV String to Array in JavaScript":
|
|
|
e8ec7a |
* http:
|
|
|
e8ec7a |
*
|
|
|
e8ec7a |
*/
|
|
|
e8ec7a |
String.prototype.splitCSV = function(sep) {
|
|
|
e8ec7a |
for (var thisCSV = this.split(sep = sep || ","), x = thisCSV.length - 1, tl; x >= 0; x--) {
|
|
|
e8ec7a |
if (thisCSV[x].replace(/"\s+$/, '"').charAt(thisCSV[x].length - 1) == '"') {
|
|
|
e8ec7a |
if ((tl = thisCSV[x].replace(/^\s+"/, '"')).length > 1 && tl.charAt(0) == '"') {
|
|
|
e8ec7a |
thisCSV[x] = thisCSV[x].replace(/^\s*"|"\s*$/g, '').replace(/""/g, '"');
|
|
|
e8ec7a |
} else if (x) {
|
|
|
e8ec7a |
thisCSV.splice(x - 1, 2, [thisCSV[x - 1], thisCSV[x]].join(sep));
|
|
|
e8ec7a |
} else thisCSV = thisCSV.shift().split(sep).concat(thisCSV);
|
|
|
e8ec7a |
} else thisCSV[x].replace(/""/g, '"');
|
|
|
e8ec7a |
} return thisCSV;
|
|
|
e8ec7a |
};
|
|
|
e8ec7a |
|
|
|
e8ec7a |
$.fn.CSVToTable = function(csvFile, options) {
|
|
|
e8ec7a |
|
|
|
e8ec7a |
this.processRow = function(headers , items){
|
|
|
e8ec7a |
var outItems = [];
|
|
|
e8ec7a |
var header;
|
|
|
e8ec7a |
for(var h = 0 ; h <= headers.length ; h++){
|
|
|
e8ec7a |
header = headers[h];
|
|
|
e8ec7a |
if(typeof(header) == 'string' ){
|
|
|
e8ec7a |
outItems.push(options.preRenderItem(header , items[h]));
|
|
|
e8ec7a |
}else if(typeof(header) != 'undefined') {
|
|
|
e8ec7a |
if(header.hidden) continue;
|
|
|
e8ec7a |
outItems.push(options.itemMerger(header , items));
|
|
|
e8ec7a |
}
|
|
|
e8ec7a |
}
|
|
|
e8ec7a |
return outItems;
|
|
|
e8ec7a |
};
|
|
|
e8ec7a |
this.preRenderItem = function(headerLabel , item) {
|
|
|
e8ec7a |
return item;
|
|
|
e8ec7a |
};
|
|
|
e8ec7a |
this.itemMerger = function(header , items) {
|
|
|
e8ec7a |
var outItem = [];
|
|
|
e8ec7a |
for(var i in header.items){
|
|
|
e8ec7a |
outItem.push(options.preRenderItem(items[i]));
|
|
|
e8ec7a |
}
|
|
|
e8ec7a |
return outItem.join(' ');
|
|
|
e8ec7a |
};
|
|
|
e8ec7a |
var defaults = {
|
|
|
e8ec7a |
tableClass: "CSVTable",
|
|
|
e8ec7a |
theadClass: "",
|
|
|
e8ec7a |
thClass: "",
|
|
|
e8ec7a |
tbodyClass: "",
|
|
|
e8ec7a |
trClass: "",
|
|
|
e8ec7a |
tdClass: "",
|
|
|
e8ec7a |
loadingImage: "",
|
|
|
e8ec7a |
loadingText: "Loading CSV data...",
|
|
|
e8ec7a |
separator: ",",
|
|
|
e8ec7a |
startLine: 0,
|
|
|
e8ec7a |
rowProcessor: this.processRow,
|
|
|
e8ec7a |
preRenderItem: this.preRenderItem,
|
|
|
e8ec7a |
itemMerger: this.itemMerger
|
|
|
e8ec7a |
};
|
|
|
e8ec7a |
var options = $.extend(defaults, options);
|
|
|
e8ec7a |
return this.each(function() {
|
|
|
e8ec7a |
var obj = $(this);
|
|
|
e8ec7a |
var error = '';
|
|
|
e8ec7a |
(options.loadingImage) ? loading = '' + options.loadingText + ' ' : loading = options.loadingText;
|
|
|
e8ec7a |
obj.html(loading);
|
|
|
e8ec7a |
$.get(csvFile, function(data) {
|
|
|
e8ec7a |
var tableHTML = '';
|
|
|
e8ec7a |
var lines = data.replace('\r','').split('\n');
|
|
|
e8ec7a |
var printedLines = 0;
|
|
|
e8ec7a |
var headerCount = 0;
|
|
|
e8ec7a |
var headers = new Array();
|
|
|
e8ec7a |
var headerLabel;
|
|
|
e8ec7a |
$.each(lines, function(lineCount, line) {
|
|
|
e8ec7a |
if ((lineCount == 0) && (typeof(options.headers) != 'undefined')) {
|
|
|
e8ec7a |
headers = options.headers;
|
|
|
e8ec7a |
tableHTML += '';
|
|
|
e8ec7a |
$.each(headers, function(index, header) {
|
|
|
e8ec7a |
if(typeof(header) != 'string' && typeof(header) != 'undefined') {
|
|
|
e8ec7a |
if(header.hidden) return;
|
|
|
e8ec7a |
}
|
|
|
e8ec7a |
headerCount++;
|
|
|
e8ec7a |
headerLabel = typeof(header) == 'string' ? header : header.label;
|
|
|
e8ec7a |
tableHTML += '' + headerLabel + '';
|
|
|
e8ec7a |
});
|
|
|
e8ec7a |
tableHTML += '';
|
|
|
e8ec7a |
}
|
|
|
e8ec7a |
if ((lineCount == options.startLine) && (typeof(options.headers) == 'undefined')) {
|
|
|
e8ec7a |
headers = line.splitCSV(options.separator);
|
|
|
e8ec7a |
headerCount = headers.length;
|
|
|
e8ec7a |
tableHTML += '';
|
|
|
e8ec7a |
$.each(headers, function(headerCount, header) {
|
|
|
e8ec7a |
tableHTML += '' + header + '';
|
|
|
e8ec7a |
});
|
|
|
e8ec7a |
tableHTML += '';
|
|
|
e8ec7a |
} else if (lineCount >= options.startLine) {
|
|
|
e8ec7a |
var items = line.splitCSV(options.separator);
|
|
|
e8ec7a |
if (items.length > 1) {
|
|
|
e8ec7a |
printedLines++;
|
|
|
e8ec7a |
items = options.rowProcessor(headers , items);
|
|
|
e8ec7a |
if (items.length != headerCount) {
|
|
|
e8ec7a |
error += 'error on line ' + lineCount + ': Item count (' + items.length + ') does not match header count (' + headerCount + ') \n';
|
|
|
e8ec7a |
}
|
|
|
e8ec7a |
(printedLines % 2) ? oddOrEven = 'odd' : oddOrEven = 'even';
|
|
|
e8ec7a |
tableHTML += '';
|
|
|
e8ec7a |
$.each(items, function(itemCount, item) {
|
|
|
e8ec7a |
tableHTML += '' + item + '';
|
|
|
e8ec7a |
});
|
|
|
e8ec7a |
tableHTML += '';
|
|
|
e8ec7a |
}
|
|
|
e8ec7a |
}
|
|
|
e8ec7a |
});
|
|
|
e8ec7a |
tableHTML += '';
|
|
|
e8ec7a |
if (error) {
|
|
|
e8ec7a |
obj.html(error);
|
|
|
e8ec7a |
} else {
|
|
|
e8ec7a |
obj.fadeOut(500, function() {
|
|
|
e8ec7a |
obj.html(tableHTML)
|
|
|
e8ec7a |
}).fadeIn(function() {
|
|
|
e8ec7a |
|
|
|
e8ec7a |
setTimeout(function() {
|
|
|
e8ec7a |
obj.trigger("loadComplete");
|
|
|
e8ec7a |
},0);
|
|
|
e8ec7a |
});
|
|
|
e8ec7a |
}
|
|
|
e8ec7a |
} , "text");
|
|
|
e8ec7a |
});
|
|
|
e8ec7a |
};
|
|
|
e8ec7a |
|
|
|
e8ec7a |
})(jQuery);
|