Link to home
Create AccountLog in
Avatar of veranopage
veranopage

asked on

How can I use the jqery datatables application to import a csv file and display as html table, please view description as I may have found a fix, but need a developer to view.

With your answer please include the code needed to make this work.

I found this helpful applciation  that is very simple  http://code.google.com/p/jquerycsvtotable/

Both datatables and the above app are free.

This is a 3month long + problem.  Please help
Avatar of Gary
Gary
Flag of Ireland image

Is there a question hidden in there somewhere...?
You've linked to a plugin that already works.
Avatar of veranopage
veranopage

ASKER

I was able to fix it but it is very slow when loading CSV file which is approx 600kb.  Please help

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
		
		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "../../media/css/demo_page.css";
			@import "../../media/css/jquery.dataTables.css";
		</style>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
		<script type="text/javascript" src="res/csvToTable.js"></script>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(function() {
	$('#CSVTable').CSVToTable('data/total115.csv', {  
			loadingImage: 'res/theme/loading.gif',  
			startLine: 1, 
			tableClass: "dataTable",
			headers: ['header1', 'header2', 'header3']
		}).bind("loadComplete",function() { 
			$('#CSVTable').find('TABLE').dataTable({sortList:[[3,0],[9,0]], widgets: ['zebra']});
			$("#CSVTable .dataTable tr").each(function(i,row) { 
				var column = (i>0)?"<td><input type='checkbox' class='removeRow' /></td>":"<th>&nbsp;</th>";
				$(this).prepend(column);
			});
			$("input:checkbox.removeRow").bind("click", function(){ 
				$(this).closest("tr").remove();
			});
		});
	});  
		</script>
	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				DataTables base example
			</div>
			
			<h1>Live example</h1>
			<div id="demo">
<div id="CSVTable">
	</body>
</html>

Open in new window

Do you have some sample data or if possible the original csv
ASKER CERTIFIED SOLUTION
Avatar of veranopage
veranopage

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
thx