CSV Datei Viewer - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

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.
Download Button
x runter geladen
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-Farbe
bordersize: '1',                       // Rahmengröße
bordercolor: '#000000',                // Rahmenfarbe
header_font_size: '14',                // Zellenkopf-Schriftgröße
header_font_italic: false,             // Zellenkopf Schrift Kursiv
header_font_bold: true,                // Zellenkopf Schrift Fett
header_font_family: 'Tahoma',          // Zellenkopf Schriftart
header_fontcolor: '#000000',           // Zellenkopf Schriftfarbe
cell_font_size: '12',                  // Zellen-Schriftgröße
cell_font_italic: false,               // Zellen Schrift Kursiv
cell_font_bold: false,                 // Zellen Schrift Fett
cell_font_family: 'Tahoma',            // Zellen Schriftart
fontcolor: '#000000',                  // Zellen Schriftfarbe
trcolor: '#FFFFFF',                    // Zellen-Farbe
trcolor_alternate: 'rgb(255,255,255)', // Zellen-Farbe alternativ
paginate: 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)"

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt