123 lines
4 KiB
JavaScript
123 lines
4 KiB
JavaScript
// Source: https://blog.mounirmesselmeni.de/2012/11/20/reading-csv-file-with-javascript-and-html5-file-api/
|
|
// Source: https://www.js-tutorials.com/javascript-tutorial/reading-csv-file-using-javascript-html5/
|
|
// Source: https://stackoverflow.com/questions/13329853/reading-server-file-with-javascript
|
|
// Source: https://www.w3schools.com/howto/howto_js_sort_table.asp
|
|
// Source: https://stackoverflow.com/questions/19105009/how-to-insert-variables-in-javascript-strings
|
|
|
|
function handleFile() {
|
|
// Check for the various File API support.
|
|
if (window.FileReader) {
|
|
// FileReader are supported.
|
|
var xmlhttp = new XMLHttpRequest();
|
|
xmlhttp.onreadystatechange = function () {
|
|
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
|
|
processData(xmlhttp.responseText);
|
|
}
|
|
};
|
|
xmlhttp.open("GET", "resources/world_data_v1.csv", true);
|
|
xmlhttp.send();
|
|
} else {
|
|
alert('FileReader are not supported in this browser.');
|
|
}
|
|
}
|
|
|
|
function processData(csv) {
|
|
var table = "<table style='width:100%'>";
|
|
|
|
// split rows
|
|
var allTextLines = csv.split(/\r\n|\n/);
|
|
|
|
// create table header
|
|
table += "<tr>";
|
|
|
|
var data = allTextLines[0].split(",");
|
|
|
|
for (var j = 0; j < data.length; j++) {
|
|
table += "<th onclick=\"sortTable(" + j + ")\">";
|
|
table += data[j];
|
|
table += "</th>";
|
|
}
|
|
|
|
table += "</tr>";
|
|
|
|
// create table content
|
|
for (var i = 1; i < allTextLines.length; i++) {
|
|
var data = allTextLines[i].split(',');
|
|
|
|
table += "<tr>";
|
|
|
|
for (var j = 0; j < data.length; j++) {
|
|
table += "<td>";
|
|
table += data[j];
|
|
table += "</td>";
|
|
}
|
|
|
|
table += "</tr>";
|
|
}
|
|
|
|
table += "</table>";
|
|
|
|
document.getElementById('t01').innerHTML = table;
|
|
}
|
|
|
|
function sortTable(n) {
|
|
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
|
|
table = document.getElementById("t01");
|
|
switching = true;
|
|
|
|
// Set the sorting direction to ascending:
|
|
dir = "asc";
|
|
|
|
/* Make a loop that will continue until
|
|
no switching has been done: */
|
|
while (switching) {
|
|
// Start by saying: no switching is done:
|
|
switching = false;
|
|
rows = table.rows;
|
|
|
|
/* Loop through all table rows (except the
|
|
first, which contains table headers): */
|
|
for (i = 1; i < (rows.length - 1); i++) {
|
|
// Start by saying there should be no switching:
|
|
shouldSwitch = false;
|
|
|
|
/* Get the two elements you want to compare,
|
|
one from current row and one from the next: */
|
|
x = rows[i].getElementsByTagName("td")[n];
|
|
y = rows[i + 1].getElementsByTagName("td")[n];
|
|
|
|
/* Check if the two rows should switch place,
|
|
based on the direction, asc or desc: */
|
|
if (dir == "asc") {
|
|
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
|
|
// If so, mark as a switch and break the loop:
|
|
shouldSwitch = true;
|
|
break;
|
|
}
|
|
} else if (dir == "desc") {
|
|
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
|
|
// If so, mark as a switch and break the loop:
|
|
shouldSwitch = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (shouldSwitch) {
|
|
/* If a switch has been marked, make the switch
|
|
and mark that a switch has been done: */
|
|
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
|
|
switching = true;
|
|
|
|
// Each time a switch is done, increase this count by 1:
|
|
switchcount++;
|
|
} else {
|
|
/* If no switching has been done AND the direction is "asc",
|
|
set the direction to "desc" and run the while loop again. */
|
|
if (switchcount == 0 && dir == "asc") {
|
|
dir = "desc";
|
|
switching = true;
|
|
}
|
|
}
|
|
}
|
|
} |