Mit JavaScript eine Liste in eine jQuery-dataTable umwandeln
Für einen Bericht/Dashboard mit einer Liste als HTML-Ausgabe kann es praktisch sein, diese Liste in eine interaktive dataTable mit Filterfunktion und direktem Excel-Export (z.B. auch mit echten Excel-Formeln) umzuwandeln.
Dies ist mit wenigen Schritten möglich.
Erst müssen die entsprechenden jQuery und dataTables JS-sourcen im Kopf der Berichtsseite geladen werden.
<link rel="stylesheet" href="/../js/jquery/datatables.min.css" type="text/css" media="all" />
<script src="/../js/jquery/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="/../js/jquery/datatables.min.js" type="text/javascript"></script>
Dann muss ein DIV-Element um die Datentabelle herum eingefügt werden, damit die Tabelle per JS angesprochen werden kann.
Hinter der Tabelle braucht es dann noch ein HTML-Element mit etwas Code, um die Cognos-Datentabelle in eine jQuery-dataTable umzuwandeln.
Um das deutsche Zahlenformat korrekt im Excel-Export zu erhalten, müssen die Zahlen vor dem Export formatiert werden. Dazu wird beim Laden der dataTable ein Array mit den Dimensionsspalten ermittelt. Dieses geschieht hier über die Spaltentitelhintergrundfarbe, kann aber auch über Namen etc. elegant gelöst werden.
<div tableWrapper>
<div id="dataTable_wrapper">
</div>
</div>
<datatable>
<script>
$('#dataTable_wrapper table').append("<thead>");
$('#dataTable_wrapper table thead').append($('#dataTable_wrapper table tbody').children()[0]);
let hdr = $('#dataTable_wrapper table thead').html();
hdr = hdr.replace(/<td /g,"<th ").replace(/<\/td>/g,"</th>");
$('#dataTable_wrapper table thead').html(hdr);
let dimColumns=[];
$('#dataTable_wrapper table thead th').each((id,elem)=>{
if($(elem).css("backgroundColor")=="rgb(224, 224, 224)") {
dimColumns.push(id);
}
});
var dt = $("#dataTable_wrapper table").dataTable({
scrollY: false,
scrollX: false,
scrollCollapse: true,
paging: false,
search: {
regex: true,
smart: false
},
ordering: true,
order: [
],
dom: 'Bfrtsp',
buttons: [{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible',
format: {
body: (data, row, column, node) => {
if(dimColumns.includes(column)) {
return node.innerText;
}else{
return node.innerText.replace(/\./g,"").replace(",",".");
}
}
}
},
customize: (xlsx) => {
let sheet = xlsx.xl.worksheets['sheet1.xml'];
//$('c[r^="A"]', sheet).attr('s', '50');
$('c[r=A1]', sheet).attr('s', '7');
$('c[r=A3]', sheet).attr('s', '4');
},
text: 'Save as Excel',
messageTop: 'Commercials Analysis',
sheetName: 'Commercials Analysis',
title: 'Commercials Analysis',
extension: '.xlsx',
}]
})
</script>