CSV Datei Viewer - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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
Downloads:
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)"
Feedbacks zu ""

Keine Kommentare gefunden.

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


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 2 Online
            » 57 Heute
            » 93 Gestern
            » 150 Woche
            » 1213 Monat
            » 42427 Jahr
            » 266633 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt