CSV Datei Viewer
Scripte > Text- & Tabellenobjekte
CSV Dateien als Tabelle anzeigen
Mit Javascript lassen sich sämtliche, auch lange Tabellen im CSV-Format sogar mit einstellbarer Pagination tabellarisch wunderschön ausgeben. Dazu muss nur die CSV-Datei in das entsprechende Verzeichnis auf den WEB-Server geladen und im HTML-Code die ersten beiden Parameter angepasst werden. Sinnvoll wäre eine Numerierung gemäß Vorlage aber kein MUSS.
Die Anpassung an die Homepage sowie die Pagination erfolgen im HTML-Code selbst an gekennzeichneter Stelle. In der Datei "csv-viewer.css" im Unterverzeichnis CSS auf dem WEB-Server werden die wichtigsten Parameter wie Breite der Tabellen und der Abstand vom linken Seitenrand gleich in der ersten Zeile eingestellt.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>...</head> und HTML-Code in den in den BODY-Bereich <body>...</body> und der ausführenden Datei an gewünschter Stelle einfügen.
Eine demo.php ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.php". Die ausführende Datei muss die Dateiendung .php aufweisen.
Beispiel:
Sollen Daten in den Tabellen verlinkt werden, so muss dieser Link in der zugehörigen CSV-Datei direkt als HTML-Code eingetragen werden, z.B. :mit Link: 1; AVM.de; <a href="http://www.avm.de/de/Extern/RSS/rss.xml">http://www.avm.de/de/Extern/RSS/rss.xml</a>ohne Link: 1; AVM.de; http://www.avm.de/de/Extern/RSS/rss.xml
Code für den <HEAD> Bereich
<!-- Hinweis:
Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->
<script src="wsX5Obj/Obj160_0/js/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="wsX5Obj/Obj160_0/css/footable.standalone.css" />
<link rel="stylesheet" href="wsX5Obj/Obj160_0/css/footable.core.css" />
<link rel="stylesheet" href="wsX5Obj/Obj160_0/css/csv_viewer.css" />
<script src="wsX5Obj/Obj160_0/js/footable.js"></script>
<script src="wsX5Obj/Obj160_0/js/footable.sort.js"></script>
<script src="wsX5Obj/Obj160_0/js/footable.paginate.js"></script>
<script src="wsX5Obj/Obj160_0/js/papaparse.js"></script>
Code für den <BODY> Bereich
<?php
$CSV_FILE = "RSS-Feeds(1)"; // CSV Dateiname ohne Dateiendung, Groß-Kleinschreibung beachten$CSV_ID = "1"; // CSV ID nach Wahl in Ziffern
?>
<div id="Obj160" class="footable">
<table id="table-<?php echo $CSV_ID; ?>"><thead id="tableheader-<?php echo $CSV_ID; ?>"><tr id="tableheaderrow-<?php echo $CSV_ID; ?>"></tr></thead><tbody id="tablebody-<?php echo $CSV_ID; ?>"></tbody><tfoot><tr id="foots-<?php echo $CSV_ID; ?>"></tr></tfoot></table><script>
if(". $CSV_FILE .".length > 0) {
$.ajax({url: "wsX5Obj/Obj160_0/<?php echo $CSV_FILE; ?>.csv",success: function (data) {
parseTable(data, {
app_id: '<?php echo $CSV_ID; ?>',file_path: 'wsX5Obj/Obj160_0/<?php echo $CSV_FILE; ?>.csv',alternate: true,
// Anpassung Zellen der Tabelle:headercolor: '#e0e0e0', // Zellenkopf-Farbebordersize: '1', // Rahmengrößebordercolor: '#000000', // Rahmenfarbeheader_font_size: '14', // Zellenkopf-Schriftgrößeheader_font_italic: false, // Zellenkopf Schrift Kursivheader_font_bold: true, // Zellenkopf Schrift Fettheader_font_family: 'Tahoma', // Zellenkopf Schriftartheader_fontcolor: '#000000', // Zellenkopf Schriftfarbecell_font_size: '12', // Zellen-Schriftgrößecell_font_italic: false, // Zellen Schrift Kursivcell_font_bold: false, // Zellen Schrift Fettcell_font_family: 'Tahoma', // Zellen Schriftartfontcolor: '#000000', // Zellen Schriftfarbetrcolor: '#FFFFFF', // Zellen-Farbetrcolor_alternate: 'rgb(255,255,255)', // Zellen-Farbe alternativpaginate: true, // Seitenzahlen anzeigen? (Pagination) [true/false]rowscount: '8', // Zeilenanzahl pro Seite die angezeigt werden soll
});
}
});
}function parseTable(data, params) {
config = {
skipEmptyLines: true,dynamicTyping: true,complete: function (results) {bodyData = results.data;headerData = bodyData[0];bodyData.shift();createTable(headerData,bodyData, params);}
}
Papa.parse(data, config);}function createTable(headerData, bodyData, params) {
var alternate = params.alternate;var tableHeaderRow = document.getElementById("tableheaderrow-" + params.app_id);var tableBody = document.getElementById("tablebody-" + params.app_id);var datatype = "";for (var i = 0; i<headerData.length; i++) {
if (/[a-zA-Z]/.test(bodyData[0][i])) {
datatype = "";} else {datatype = "numeric";}var newth = document.createElement("th");newth.innerHTML = headerData[i];newth.id = "th-" + i;newth.style.background = params.headercolor;newth.style.border = params.bordersize + "px solid " + params.bordercolor;newth.style.fontSize = params.header_font_size + "px";newth.style.fontFamily = params.header_font_family;newth.style.fontWeight= (params.header_font_bold ? "bold" : "initial");newth.style.fontStyle= (params.header_font_italic ? "italic" : "initial");newth.style.color = params.header_fontcolor;newth.setAttribute("data-type", datatype);tableHeaderRow.appendChild(newth);}for (var i = 0; i<bodyData.length; i++) {var newtr = document.createElement("tr");newtr.id = "tr" + i;tableBody.appendChild(newtr);for(var j = 0; j < bodyData[i].length; j++) {
var newtd = document.createElement("td");newtd.innerHTML = bodyData[i][j];newtd.setAttribute("data-value", bodyData[i][j]);newtd.id = "td-" + i + "-" + j;newtd.style.border = params.bordersize + "px solid " + params.bordercolor;newtd.style.fontSize = params.cell_font_size + "px";newtd.style.fontFamily = params.cell_font_family;newtd.style.fontWeight= (params.cell_font_bold ? "bold" : "initial");newtd.style.fontStyle= (params.cell_font_italic ? "italic" : "initial");newtd.style.color = params.fontcolor;newtr.appendChild(newtd);}}$("#table-" + params.app_id + " tbody tr").css("background-color", params.trcolor);if (alternate) {$("#table-" + params.app_id + " tbody tr:even").css("background-color", params.trcolor_alternate);}var pagination = params.paginate;var table = document.getElementById("table-" + params.app_id);if (pagination) {table.setAttribute("data-page-size" , params.rowscount);var pagination_td = "<td colspan='" + headerData.length + "' style='border: " + params.bordersize + "px solid " + params.bordercolor + "'><div class='pagination pagination-centered hide-if-no-paging'></div></td>";document.getElementById("foots-" + params.app_id).innerHTML = pagination_td;} else {
table.setAttribute("data-page-size" , bodyData.length);}$("#table-" + params.app_id).footable().bind( {
'footable_sorted' : function(e) {
if (alternate){$("#table-" + params.app_id + " tbody tr:even").css("background-color", params.trcolor_alternate);$("#table-" + params.app_id + " tbody tr:odd").css("background-color", params.trcolor);}
}
});table.style.border = params.bordersize + "px solid " + params.bordercolor;
}
</script>
</div>
Code für den <BODY> Bereich
<?php
$CSV_FILE = "Podcast(2)"; // CSV Dateiname ohne Dateiendung, Groß-Kleinschreibung beachten$CSV_ID = "2"; // CSV ID nach Wahl in Ziffern
?>
<div ...restlicher Code identisch oben "RSS-Feeds(1)"
Feedbacks zu ""
Keine Kommentare gefunden.
Vielen Dank für Dein Feedback.
Bitte Dein Feedback
Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.
Login | Registrierung