CSV Viewer - Website X5 Hilfe - Die Helpsite

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

CSV Viewer

Scripte > Text- & Tabellenobjekte

CSV Dateien als Tabelle anzeigen

Inzwischen bietet das Internet bzw. mehr die Programmierung bereits viele Möglichkeiten um Dateien anzuzeigen. Und doch kann ist es von nöten sein, automatisierte immer wechselnde csv-Datei 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 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.
Download Button
x runter geladen!
Code für den <HEAD> Bereich
<!-- Hinweis: jQuery ist erforderlich für die Funktion "nicht mehrere Player gleichzeitig abspielen". -->
<!-- Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht natürlich 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){
$.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>
Feedbacks zu ""


Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2018





Besucher Statistik
» 2 Online
» 572 Heute
» 469 Gestern
» 1807 Woche
» 5758 Monat
» 75579 Jahr
» 322157 Gesamt
Record: 1420 (10.04.2014)
Gesamt Downloads:
Zurück zum Seiteninhalt