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.

Downloads:

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.

-->

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<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){
$.ajax({
// hier Dateinamen anpassen:
url: "wsX5Obj/Obj160_0/RSS-Feeds(9).csv",
success: function (data){
parseTable(data, {
app_id: 'Obj160_0',
// hier Dateinamen anpassen:

file_path: 'wsX5Obj/Obj160_0/RSS-Feeds(9).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: 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);
var datatype = "";
//header creation
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 true
  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>

Nach dem <BODY> Tag

Feedbacks zu ""

Kein Kommentar

Vielen Dank für Dein Feedback.