Formatting Exported Footer

enorthrop

Hello!

This is my last question for you guys and I promise I will leave you alone. Thank you for the help so far.

I've got my program working as needed, but the last portion I am struggling with is formatting the footer for my exported/printed table. I've been searching and reading through documentation (such as https://datatables.net/reference/api/buttons.exportData() ), but I can't seem to find an example on how to format the footer in the manner that I need. Currently, the "summed" piece of my table is occupying a cell below my table in the exported Excel or PDF file (which is fine) but the data is being displayed as one long line. I was curious if there was an exportOption or some other means that would allow me to add a break or new line in between the data entries?

Here is my code:

$(document).ready(
    function () {
        $('#reportTable').DataTable(
        {
            dom: 'Blfript', // Blfrtip
            buttons:
            [
                {
                    extend: 'pdf',
                    footer: true,
                    className: 'green glyphicon glyphicon-file',
                    title: 'Report',
                    filename: 'Report',
                    orientation: 'landscape',
                    pageSize: 'LEGAL',
                    exportOptions:
                    {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7]
                    }
                },
                {
                    extend: 'excel',
                    footer: true, 
                    className: 'green glyphicon glyphicon-list-alt',
                    title: 'Report',
                    filename: 'Report',
                    pageSize: 'LEGAL',
                    exportOptions:
                    {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7]
                    }
                },
                {
                    extend: 'copy',
                    title: 'Report',
                    footer: true,
                    className: 'green glyphicon glyphicon-duplicate',
                    exportOptions:
                    {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7]
                    }
                },
                {
                    extend: 'print',
                    footer: true,
                    className: 'green glyphicon glyphicon-print',
                    text: 'Print',
                    title: ' ',
                    autoPrint: true,
                    orientation: 'landscape',
                    pageSize: 'LEGAL',
                    exportOptions:
                        {
                            columns: [0, 1, 2, 3, 4, 5, 6, 7]
                        }
                }
            ],
            "footerCallback": function (row, start, end, display)
            {
                var api = this.api(),data;

                // Remove the formatting to get integer data for summation
                var intVal = function (i)
                {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                            i : 0;
                };                  

                // Total over all pages
                total = api
                    .column(7)
                    .data()
                    .reduce(function (a, b)
                    {
                        return intVal(a) + intVal(b);
                    }, 0);

                // Total over all filtered pages
                if (api
                    .column(7,
                        {
                            search: 'applied'
                        })
                    .data()
                    .length)
                        {
                            pageTotal = api
                            .column(7, 
                                {
                                    search: 'applied'
                                })
                    .data()
                    .reduce(function (a, b) 
                        {
                            return intVal(a) + intVal(b);
                        });
                } else {
                    pageTotal = 0;
                }   
                
                // Total by category               
                var category = api.column(6).data().sort().unique().toArray();
                var totals = [];
                for (var i = 0; i < category.length; i++) totals.push(0);

                api.rows({ filter: 'applied' }).every(function ()
                {
                    var data = this.data();
                    totals[category.indexOf(data[6])] += intVal(data[7]);
                });

                // Remove any categories that have a "0" result
                html = [];            
                for (var j = 0; j < category.length; j++) {
                    if (totals[j] > 0) html.push(category[j] + ': ' + totals[j].toFixed(2));
                } 

                // Update footer
                $(api.column(7).footer()).html(html.length === 0 ? "" : html.join('</br>') + '</br>' + pageTotal.toFixed(2) + ' filtered hours' + '</br>' + total.toFixed(2) + ' total hours'); 
            },
        });
    }
);

colin

Hi @enorthrop ,

This example here may help, it shows how to add a new line at the end of the export.

Cheers,

Colin