Pdf Export - Footer repeated

lickybuay

Hi everyone

Don't know if its a repeated question, but I'm having this problem. When i export to PDF got repeated footer for each column. Everything loads well, the trouble it's when i export to PDF.

Tried adding like a row, but doesn't allow colspan. Gave me errors

I'm using: DataTables 1.10.16 with this files:
"assets/css/jquery.dataTables.min.css",
"assets/css/buttons.dataTables.min.css",
"assets/css/dataTables.bootstrap4.min.css",
"assets/css/buttons.bootstrap4.min.css",
"assets/js/jquery-1.12.4.js",
"assets/js/jquery.dataTables.min.js",
"assets/js/dataTables.bootstrap4.js",
"assets/js/dataTables.buttons.min.js",
"assets/js/buttons.flash.min.js",
"assets/js/jszip.min.js",
"assets/js/pdfmake.min.js",
"assets/js/vfs_fonts.js",
"assets/js/buttons.html5.min.js",
"assets/js/buttons.print.min.js"

Here's my code (Some values comes from variables).

------------- Dynamic Footer Code -------------

let footer = '
<tr class="dataFooter">
<th class="text-right" colspan="5">
<h5 class="d-inline-block mr-2">Distancia recorrida de la flota <span class="badge badge-secondary ml-2">1.768km</span></h5>
<h5 class="d-inline-block">Total Litros <span class="badge badge-secondary">302 Litros</span></h5>
</th>
</tr>
';
$('.dataFooter').remove();
$("#datainfo").append( $('<tfoot/>').append( footer ));

------------- Code -------------

$('#datainfo').DataTable({
dom: 'lfrBtip',
lengthMenu: [[10, 15, 25, 50, -1], [10, 15, 25, 50, "All"]],
responsive: true,
serverSide: false,
processing: false,
paging: true,
data: this.TableData, //Contenido de la tabla
columns: this.t_columns,
pagingType: "full_numbers",
bAutoWidth: false,
language: { url: "/assets/i18/Spanish.json" },
lengthChange: true,
initComplete: function(settings, json) {
$('.dataTables_wrapper .dataTables_filter input, .dataTables_length select').addClass('form-control');
},
rowCallback: (row: Node, data: any | Object, index: number) => {
//Genera las acciones de los botones
this.doAction(row);
return row;
},
columnDefs: [
{
visible: false,
targets: Agrupar.target
}
],
drawCallback: function ( settings ) {
//Para agrupar por columnas
if(Agrupar.estado){
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column( Agrupar.target, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
);
last = group;
}
});
}
},
buttons: [
{
className: 'btn btn-secondary buttons-html5',
exportOptions: { columns: this.exp_columns },
extend: 'excel',
title: filename,
init: function(api, node, config) {
$(node).removeClass('dt-button')
},
footer: true
},
{
className: 'btn btn-secondary buttons-html5',
exportOptions: {
columns: this.exp_columns,
search: 'applied',
order: 'applied'
},
extend: 'pdfHtml5',
bProcessing: true,
orientation: 'landscape',
pageSize: 'A4', //A3 , A5 , A6 , legal , letter
title: filename,
footer: true,
header: {
margin: 10,
columns: [
{
image: logo,
width: 40
},
{
margin: [10, 0, 0, 0],
text: 'Here goes the rest'
}
]
},
init: function(api, node, config) {
$(node).removeClass('dt-button');
},
customize: function ( doc ) {
//Remove the title created by datatTables
doc.content.splice(0,1);
// Set page margins [left,top,right,bottom] or [horizontal,vertical]
doc.pageMargins = [20,60,20,30];
// Set the font size fot the entire document
doc.defaultStyle.fontSize = 7;
// Set the fontsize for the table header
doc.styles.tableHeader.fontSize = 7;
// Create a header object with 3 columns
// Left side: Logo - Middle: brandname - Right side: A document title
doc['header']=(function() {
return {
columns: [
{
image: logo,
width: 80
},
{
alignment: 'left',
italics: true,
text: filename,
fontSize: 14,
margin: [10,0]
},
{
alignment: 'right',
fontSize: 12,
text: fecha
}
],
margin: 20
}
});
// Create a footer object with 2 columns
// Left side: report creation date - Right side: current page and total pages
doc['footer']=(function(page, pages) {
return {
columns: [
{
alignment: 'left',
text: [footright]
},
{
alignment: 'right',
text: [ 'Página ', { text: page.toString() }, ' de ', { text: pages.toString() }]
}
],
// Set page margins [left,top,right,bottom] or [horizontal,vertical]
margin: [20, 5, 20, 20]
}
});
// Change dataTable layout (Table styling)
// To use predefined layouts uncomment the line below and comment the custom lines below
// doc.content[0].layout = 'lightHorizontalLines'; // noBorders , headerLineOnly
var objLayout = {};
objLayout['hLineWidth'] = function(i) { return .5; };
objLayout['vLineWidth'] = function(i) { return .5; };
objLayout['hLineColor'] = function(i) { return '#aaa'; };
objLayout['vLineColor'] = function(i) { return '#aaa'; };
objLayout['paddingLeft'] = function(i) { return 4; };
objLayout['paddingRight'] = function(i) { return 4; };
doc.content[0].layout = objLayout;
}
},
{
className: 'btn btn-secondary buttons-html5',
exportOptions: { columns: this.exp_columns },
extend: 'print',
text: 'Imprimir',
title: filename,
init: function(api, node, config) {
$(node).removeClass('dt-button')
},
footer: true
}
]
});

kthorngren

Wow, thats lots of code to look through. Any chance you can build a test case show ing the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Would make it easier for someone to help you.

Kevin

lickybuay

Sorry @kthorngren , Here i clean a lot of the code. Just need to wait for the files to stream.

http://live.datatables.net/yetuyora/1/watch?html,js,output

Thanks for the Help

kthorngren

Thanks for the test case. It looks like the problem is due to the colspan you have in the footer:

       <tfoot>
          <tr class="dataFooter">
            <th class="text-right" colspan="5">
                <h5 class="d-inline-block mr-2">Distancia recorrida de la flota <span class="badge badge-secondary ml-2">1.768km</span></h5>
                <h5 class="d-inline-block">Total Litros <span class="badge badge-secondary">302 Litros</span></h5>
            </th>
        </tr>
        </tfoot>

It seems the colspan="5" is causing the export to output 5 copies of the data in the footer. If I remove the colspan then it has the information once in the footer.

Unfortunately I don't immediately know how to fix this. Maybe @allan will provide a suggestion.

Kevin

allan

Yes Kevin is correct - this is a limitation in the Buttons export at the moment I'm afraid. It doesn't support colspan or rowspan.

Allan

lickybuay

Kipping in mind you both told me, maybe i could remove and add the colspan value before (removing the extra th) then export the pdf. But, how can i manage that? it's there a afterExport function?

Made the beforeExport using:
buttons: [
{
extend: 'pdfHtml5',
action: function ( e, dt, node, config ) {
console.log("Do custom processing");
$.fn.dataTable.ext.buttons.pdfHtml5.action.call(this, e, dt, node, config);
}
}
]

But for Before?

Thanks

kthorngren

Maybe the buttons.action function will work. One of the examples shows how to run the default action of the button.

Kevin

vaishnavkoka

Hi @lickybuay , @kthorngren ,
You can make use of <th></th> instead of using colspan or rowspan, it will work for sure.

Thanks
Koka