CSV Datei Viewer - Website X5 Helpsite

CSV Dateien als Tabelle anzeigen

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

$CSV_FILE   = "RSS-Feeds(1)";  // CSV Dateiname ohne Dateiendung, Groß-Kleinschreibung beachten

$CSV_ID     = "1";             // CSV ID nach Wahl in Ziffern

<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>

$CSV_FILE   = "Podcast(2)";  // CSV Dateiname ohne Dateiendung, Groß-Kleinschreibung beachten

$CSV_ID     = "2";           // CSV ID nach Wahl in Ziffern