CSV Viewer
Scripte > Text- & Tabellenobjekte
CSV Dateien als Tabelle anzeigen
Inzwischen bietet das Internet bzw. die Programmierung bereits viele Möglichkeiten um Dateien anzuzeigen.
Und doch kann ist es von nöten sein, automatisierte immer wechselnde csv-Dateien anzeigen zu wollen.
Hier seht ihr eine Möglichkeit.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HTML-Code in den in den BODY-Bereich <body>...</body> und HEAD-Code in den HEAD-Bereich <head>...</head> der ausführenden Seite an gewünschter Stelle einfügen.
Diverse Einstellungen für die Tabelle können im HTML-Code vorgenommen werden. Im Ordner "wsx5Obj/Obj160_0/css" befindet sich eine Datei css_viewer.css. Darin befinden sich einige noch deaktivierte CSS-Einstellungen für die Formatierung der Tabelle.
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".
Wichtig: Die ausführende Datei muss die Dateiendung .php aufweisen.
Code für den <HEAD> Bereich
<!--
Hinweis: jQuery ist erforderlich für einige Funktionen.
Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr.
-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="wsX5Obj/Obj160_0/css/footable.standalone.css" media="screen, print"/>
<link rel="stylesheet" type="text/css" href="wsX5Obj/Obj160_0/css/footable.core.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="wsX5Obj/Obj160_0/css/csv_viewer.css" media="screen, print" />
<script type="text/javascript" src="wsX5Obj/Obj160_0/js/footable.js"></script>
<script type="text/javascript" src="wsX5Obj/Obj160_0/js/footable.sort.js"></script>
<script type="text/javascript" src="wsX5Obj/Obj160_0/js/footable.paginate.js"></script>
<script type="text/javascript" src="wsX5Obj/Obj160_0/js/papaparse.js"></script>
Code für den <BODY> Bereich
<div id="Obj160_0">
<table id="table-Obj160_0 class="footable">
<thead id="tableheader-Obj160_0"><tr id="tableheaderrow-Obj160_0"></tr></thead><tbody id="tablebody-Obj160_0"></tbody><tfoot>
<tr id="foots-Obj160_0"></tr>
</tfoot>
</table><script>
// hier Dateinamen anpassen:if("wsX5Obj/Obj160_0/RSS-Feeds(9).csv".length > 0){// hier Dateinamen anpassen:$.ajax({url: "wsX5Obj/Obj160_0/RSS-Feeds(9).csv",success: function (data){parseTable(data, {// hier Dateinamen anpassen:app_id: 'Obj160_0',
file_path: 'wsX5Obj/Obj160_0/RSS-Feeds(9).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: false, // mit Seitenzahlen?rowscount: '9', // Zeilenanzahl 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);//header creationvar 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);//body creation}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) {// after sorting the rows, we need to repaint the background color if alternate check is trueif (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>
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.