CSV Datei Viewer - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Besucher Statistik
» 2 Online
» 47 Heute
» 43 Gestern
» 524 Woche
» 2135 Monat
» 21489 Jahr
» 307403 Gesamt
Record: 1144 (01.02.2020)
Gesamt Downloads:
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.

Registrierung

Login


Erstellen Dir ein Konto, damit Deine Kommentare ohne Bestätigung veröffentlicht werden können.


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

          © 2009 - 2021

          Hosting by
          Zurück zum Seiteninhalt