Datatable does not allow to include multiple footers rows into exported pdf file

Question

I am trying to create a Datatable PDF with multiple footers support with export option.

But it's only allow first row of footer to be in exported PDF

Kindly , let me know if it possible to create multiple footers in datatable ? And if it then how to implement in java script?

I am sharing code

in Java Script created datatable and add tfoot in table

'<tfoot id="reportTblFoot' + chartIndex+ '">'+
'</tfoot>'

varible of table footer

var tfoot='#reportTblFoot'+chartIndex;

Data append in footer

var footer1 = $("<tr />");
                footer1.append("<td style='border:none;font-style:italic;line-height:0;font-size:10px'>* Applicable row 1</td>");
                footer1.append("<td style='display:none'/>");
                footer1.append("<td style='display:none'/>");
                $(tfoot).append(footer1);

            var footer2 = $("<tr />");
            footer2.append("<td style='border:none;font-style:italic;line-height:0;font-size:10px'>** Not Applicable row 2</td>");
            footer2.append("<td style='display:none'/>");
            footer2.append("<td style='display:none'/>");
            $(tfoot).append(footer2);

            var footer3 = $("<tr />");
            footer3.append("<td style='border:none;font-style:italic;line-height:0;font-size:10px'>*** Not Applicable row 3</td>");
            footer3.append("<td style='display:none'/>");
            footer3.append("<td style='display:none'/>");
            $(tfoot).append(footer3);

            var percSumNote = $("<tr />");
            percSumNote.append("<td style='border:none;'><font size='1' color='grey'>**** Not Applicable row 4</font></td>");
            percSumNote.append("<td style='display:none'/>");
            percSumNote.append("<td style='display:none'/>");
            $(tfoot).append(percSumNote);

In datatable properties apply TRUE for footer

buttons: [ {
                                 extend: 'pdf',
                                 filename:fileName,
                                 message:tableSubTitle,
                                 title: tableTitle,
                                 footer:true,
                                 pageSize : "A3",
                                 customize: function (doc) {
                                     doc.defaultStyle.alignment = 'left';
                                     doc.styles.message = {
                                             alignment: 'center'
                                         }
                                     doc.styles.table = {
                                             alignment: 'center',
                                             width: '100%',
                                         }
                                     doc.defaultStyle.fontSize = 16;
                                     doc.styles.tableFooter.fontSize = 8;
                                     doc.pageMargins = [ 130, 20, 130, 20 ];
                                     doc.content.forEach(function(item) {
                                         if (item.table) {
                                            // Set width for 3 columns
                                            item.table.widths = [350, 100, 100,'*'] 
                                         } 
                                      });
                                 } 
                             }]

And in downloaded PDF only first footer is added

@davidkonrad Yes , i googled some of those link and i didn't find solution. — Saurabh Mehta
Also this explanation from the author or this github issue or this another issue ...? First hits in google? — davidkonrad
You could style the single footer with cells containing multiple lines, but to make it look great or as multiple footers you would need some serious investigating in the pdfmake component, I guess... — davidkonrad

Gyrocode.com Gyrocode.com · Accepted Answer · 2017-04-20T15:30:33

As @davidkonrad mentioned, author explains in this post that it's not currently supported.

The workaround would be to combine multiple footers into one row, use line break \n in between rows and configure PDF library not to strip line breaks.

For example:

var tfoot='#reportTblFoot'+chartIndex;

var footer1 = $("<tr />");
footer1.append(
    "<th>" +
    "<div style='font-style:italic;font-size:10px'>" +
    "* Applicable row 1<br>\n" +
    "** Not Applicable row 2<br>\n" +
    "*** Not Applicable row 3\n" +
    "</div>" +
    "<div>" +
    "<font size='1' color='grey'>**** Not Applicable row 4</font>" +
    "</div>" +
    "</th>"
);

footer1.append("<th style='display:none'/>");
footer1.append("<th style='display:none'/>");

$(tfoot).append(footer1);

Also you need to use the following options for your PDF button to avoid striping line breaks.

buttons: [
   { 
      extend: 'pdfHtml5',
      footer:true,
      exportOptions: {
         stripNewlines: false
      }
      // ... skipped other options ...
   }
],

See this example for code and demonstration.

Datatable does not allow to include multiple footers rows into exported pdf file

1 Answers