CSV Viewer - Website X5 Hilfe - Die Helpsite

CSV Dateien als Tabelle anzeigen

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