Convertir un fichier csv en un tableau html!
Bonjour,
En fait je cherchais une lib js qui me permettrait de convertir un fichier csv en un tableau (si possible avec filtre), puis je vais démerder derrière pour appliquer des couleurs aux cellules.
je suis tombé sur un projet opensource (js-tables.js) qui me parait pas mal et dont l'exemple réalise exactement ce que je veux.
Le projet :
http://code.google.com/p/js-tables/
L'exemple :
http://www.s-anand.net/csv
J'ai donc essayé de récupérer le code source de l'exemple, afin de le personnaliser, en l'occurence enlever tout ce qui a trait au projet sur la page, ne plus récupérer le chemin du fichier csv via un formulaire, mais assigner directement la variable .
Le code source original :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <!doctype html><html><head><title>CSV Viewer</title>
<style>
body { font-family: Calibri, Arial, sans-serif; }
#table td, th { border: 1px solid #aaf; padding: 1px 5px; width: 10em; }
#table th { background-color: #ccf; }
#table input { width: 100%; margin: 0; padding:0; border: 0; }
#table table { border-collapse: collapse; }
#url { width: 20em; }
</style>
<title></title>
</head><body>
<h1>CSV Viewer</h1>
<form action="/csv" method="get">
URL of a CSV file:
<input name="url" id="url" value=""/>
<input id="go" type="submit" value="Go" />
</form>
<a target="_blank" href="http://www.google.com/search?q=data+ext%3Acsv">Find CSVs on the Web</a>
<p>Search using regular expressions. Note: table is incrementally loaded as you scroll down.
(<a href="http://code.google.com/p/js-tables/">source</a>).</p>
<div id="table"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://js-tables.googlecode.com/svn/trunk/jquery.csv.js"></script>
<script src="http://js-tables.googlecode.com/svn/trunk/jquery.table.js"></script>
<script>
function showCSV(url) {
$("#table").html("<img src='/i/loading-big.gif' alt='Loading...' />");
$.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_id=tjQdGky93BGl8_s0EpPZnA&url=" +
(encodeURIComponent||escape)(url) +
"&_render=json&_callback=?",
function(data) {
var csv = $.map(data.value.items, function(v) { return v.data; }).join("\n");
$("#table").table($.csv()(csv));
});
}
$(function() {
var duc = decodeURIComponent || unescape;
var url = duc(window.location.search.substr(5)) || "http://html5.googlecode.com/svn/trunk/data/tokens.csv";
if (url) {
$("#url").val(url);
showCSV(url);
}
});
</script>
</body></html> |
Après avoir commenté des lignes comme il faut je n'ai pas le résultat escompté, voici mon code
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| <!doctype html><html><head><title>CSV Viewer</title>
<style>
body { font-family: Calibri, Arial, sans-serif; }
#table td, th { border: 1px solid #aaf; padding: 1px 5px; width: 10em; }
#table th { background-color: #ccf; }
#table input { width: 100%; margin: 0; padding:0; border: 0; }
#table table { border-collapse: collapse; }
#url { width: 20em; }
</style>
<title></title>
</head><body>
<h1>CSVs Viewer</h1>
<!--form action="/csv" method="get"-->
<!--URL of a CSV file:-->
<!--input name="url" id="url" value=""/-->
<!--input id="go" type="submit" value="Go" /-->
<!--/form-->
<!--a target="_blank" href="http://www.google.com/search?q=data+ext%3Acsv">Find CSVs on the Web</a-->
<!-- <p>Search using regular expressions. Note: table is incrementally loaded as you scroll down.-->
<!--(<a href="http://code.google.com/p/js-tables/">source</a>).</p> -->
<div id="table"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://js-tables.googlecode.com/svn/trunk/jquery.csv.js"></script>
<script src="http://js-tables.googlecode.com/svn/trunk/jquery.table.js"></script>
<script>
document.write("toto\n");
function showCSV(url) {
document.write("enter showCSV\n");
// $("#table").html("<img src='/i/loading-big.gif' alt='Loading...' />");
$.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_id=tjQdGky93BGl8_s0EpPZnA&url=" +
(encodeURIComponent||escape)(url) +
"&_render=json&_callback=?",
function(data) {
var csv = $.map(data.value.items, function(v) { return v.data; }).join("\n");
print ("toto");
$("#table").table($.csv()(csv));
});
}
document.write("after showCSV\n");
$(function() {
document.write("first anonymous test!!!\n");
// var duc = decodeURIComponent || unescape;
//var url = duc(window.location.search.substr(5)) || "http://html5.googlecode.com/svn/trunk/data/tokens.csv";
var url = "http://html5.googlecode.com/svn/trunk/data/tokens.csv";
if (url) {
document.write("second anonymous test!!!\n");
$("#url").val(url);
showCSV(url);
}
});
document.write("last test!!!\n");
</script>
</body></html> |
.
J'ai utilisé le fichier cvs http://html5.googlecode.com/svn/trunk/data/tokens.csv de l'exemple pour mon test, et les document.write dans mon code servent à débugger. Je pense qu'il y a un erreur dans le deuxième fonction anonyme, mais je ne sais laquelle, car à l'intérieur et après celle-ci plus rien ne s'affiche.
Je viens vers vous car je ne suis pas un as du js, je suis plutôt système, et j'aimerais juste que vous corrigiez mon code afin qu'il affiche ce que je veux. Je ne trouve pas le subtilité.
Merci beaucoup pour votre attention.
Cordialement.
