Colspan Repeating Workaround

enorthrop

Hello!

I've been looking for a workaround on an issue I have been having, but I have not come up with anything yet. I am using a Datatable with the standard buttons (print, copy, export), but when I attempt to print or export the table the footer (which contains my sums of certain columns) is repeated under each column. I was able to find out that this is an issue that Datatables has with colspan (which I am currently using), but I haven't been able to find a way to make this feature work the way I want it to.

Any help would be greatly appreciated!

Here is my script:

$(document).ready(
    function () {
        $('#reportTable').DataTable(
        {

            dom: 'Blfript', // Blfrtip
            buttons:
            [
                {
                    extend: 'pdf',
                    footer: true,
                    className: 'green glyphicon glyphicon-file',
                    title: 'Report',
                    filename: 'Report',
                    orientation: 'landscape',
                    exportOptions:
                    {
                        columns: [0, 1, 3, 5]
                    }
                },
                {
                    extend: 'excel',
                    footer: true,
                    className: 'green glyphicon glyphicon-list-alt',
                    title: 'Report',
                    filename: 'Report',
                    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',
                    exportOptions:
                        {
                            columns: [0, 1, 3, 5]
                        }
                }
            ],
            "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(5)
                    .data()

                    .reduce(function (a, b)
                    {
                        return intVal(a) + intVal(b);
                    }, 0);

                // Total over all filtered pages
                if (api
                    .column(5,
                        {
                            search: 'applied'
                        })
                    .data()
                    .length)
                        {
                            pageTotal = api
                            .column(5, 
                                {
                                    search: 'applied'
                                })
                    .data()
                    .reduce(function (a, b) 
                        {
                            return intVal(a) + intVal(b);
                        });
                } else {
                    pageTotal = 0;
                }   
                
                // Total by category               
                var category = api.column(7).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[7])] += intVal(data[5]);
                });

                // 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]);
                } 

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

Here is my html:

@* Displays the total within the footer *@
    <tfoot>
        <tr>
            <th></th>
            <th colspan="7" style="text-align:right">Total: 0.0</th>
            <th></th>
        </tr>
    </tfoot>

colin

Hi @enorthrop ,

I just tried this with PDF export, see example here, and the footer is on the single column. Could you modify that example to demonstrate the problem, please.

Cheers,

Colin

enorthrop

Hello!

I think I was able to replicate it http://live.datatables.net/razekupi/2/edit?html,js,output . You'll see in the PDF it gives the age total at the bottom of a couple of columns. In my program it adds the total to every column. =/

allan

I'm afraid that colspan (and rowspan) is not supported in the header or the footer of the exported data at this time. You need to have a unique cell per column in the footer for the export to work as expected.

This is something I've done some work on recently and plan to address with v2.

Allan

enorthrop

Ah, I see! Thank you for the information. I am not familiar with setting unique cells like that. Could you possibly point me in the right direction on how to accomplish that?

colin

Hi @enorthrop ,

If you look at the footer rows in my example, they're all distinct cells - so you just need to do the same in your (with no colspan),

Cheers,

Colin

enorthrop

Alrighty. Thanks guys. I'll see what I can do.

vaishnavkoka

@enorthrop ,

Instead of using rowspan or colspan , you can make use of <th></th> tags in the footer section of datatable
ex: Let's say you have <th colspan="3">total</th>
this can be changed to :
<th></th> <th></th> <th>total</th>
This stops repetition of "total" in footer section of pdf.

Thanks
Koka