Can't get footer for Datatable as input

Lapointe · April 2021

hi @allan

I try to get sum for columns in a datatable as input field.

Can't get it, nor footer displayed...

Try to set footer with text array, no more result

Do you have a sample on how to set and display a footer on input type datatable please ?

Thanks

Regards
Bob

zgoforth · April 2021

Can you please provide a test case or example?

Lapointe · April 2021

Hi
No way to display any footer on datatable as input..
Do you have sample where it's running ?

kthorngren · April 2021

Found this with a google search:
https://gist.github.com/chrisdiana/1a9ab4c0f40368f7a658b721603ccbcc

One problem is it will probably add a new footer for each draw. You will need to add code to check to see if the footer exists before adding it. Plus its adding text inputs which you won't need for a plain footer for column sums.

Let us know if you can make it work.

Kevin

Lapointe · April 2021

Hi @kevin

Reading Allan post let me think footer was set

https://editor.datatables.net/reference/field/datatable
footer
Since: 2.0.2
This option makes it possible to specify a footer for the table that is displayed by this control. It can be given as an array of strings (the length of which should match the number of columns you have) and each entry will be inserted into a th element. Alternatively, you can pass in a string which contains the HTML of the row to use for the footer, or a jQuery instance which contains the tr element to use.

Perhaps missunderstood...

Hope you are fine.

Regards
Bob

kthorngren · April 2021

Sorry, I haven't used the datatable input option yet and didn't know about that option I built this example based on the single select example. It uses the footer option.

http://live.datatables.net/guwafemu/189/edit

Kevin

colin · April 2021

Yep, thanks Kevin, that example demonstrates the new footer option that was added in 2.0.2.

Colin

Lapointe · April 2021

Hi men's
OK, I will test this syntax, and try to get sum for some columns.

In fact I was trying to do as with datatable table syntax and could not get result with api columns.

Thanks a lot. You are the best (#2 and #3) in the order you want

Regards

Bob

colin · April 2021

Ha, guessing Allan deserves the #1 spot

Lapointe · April 2021

Yes indeed.

Just a question... I use Kevin syntax and get sum as needed in datatable control.
When printing dt as input I get on each page sum where page total is ever the same.

        .add({
            name: 'UrssafFacPrint',
            type: 'datatable',
            className : 'hiddenDatatable',
            optionsPair: { value: 'ID' },
            footer: ["N°", "Client", "Date", "Banque", "Période", "Professions libérales-BNC (685)", "Ventes de marchandises-BIC (631)", "Prestations commerciales .....-BIC (646)"],
            config: {
                columns: [
                    { title: 'N°', data: 'numFac' },
                    { title: 'Client', data: 'cliAll' },
                    { title: 'Date', data: 'datFac' },
                    { title: 'Banque', data: 'datBqe' },
                    { title: 'Période', data: 'perUrs' }
                    
                    ,{ title: "Professions libérales-BNC (685)",
                        data: "typ_1",
                        render: $.fn.dataTable.render.number( ' ', '.', 2, '', '€' ),
                        className: "dt-body-right"
                    }

                    ,{ title: "Ventes de marchandises-BIC (631)",
                        data: "typ_2",
                        render: $.fn.dataTable.render.number( ' ', '.', 2, '', '€' ),
                        className: "dt-body-right"
                    }

                    ,{ title: "Prestations commerciales .....-BIC (646)",
                        data: "typ_3",
                        render: $.fn.dataTable.render.number( ' ', '.', 2, '', '€' ),
                        className: "dt-body-right"
                    }
                ],
                footerCallback: function ( row, data, start, end, display ) {
                    var api = this.api(), data;
                    var total, pageTotal;
                    var intVal = function ( i ) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '')*1 :
                            typeof i === 'number' ?
                                i : 0;
                    };
                    for(var i=5, ien = api.columns().count(); i<ien; i++){
                        pageTotal = api
                            .column( i, { page: 'current'} )
                            .data()
                            .reduce( function (a, b) {
                                return intVal(a) + intVal(b);
                            }, 0 );
                        total = api
                            .column( i )
                            .data()
                            .reduce( function (a, b) {
                                return intVal(a) + intVal(b);
                            }, 0 );
                        $( api.column( i ).footer() ).html(
                            '<span style=\'text-align:right\'>' + total.toFixed(2) +'€ </span>'
                        );
                    }
                },
                select: false,
                searching: false,
                info: false
            }
        })

Can you give me a search why direction please?

Good week end

kthorngren · April 2021

You have this:

                $( api.column( i ).footer() ).html(
                    '<span style=\'text-align:right\'>' + total.toFixed(2) +'€ </span>'
                );

Looks like total is the sum across all pages. If this doesn't help please provide a test case showing an example of what you have so we can help debug.

Kevin

Lapointe · April 2021

sorry...

'<div align=\'right\'>' + pageTotal.toFixed(2) +'€\n(' + total.toFixed(2) +'€) </div>'

I did change seeing this was not running correctly... then change < div align to <span style (because div can't align) and copy line after that to correct div by span...

Bob

Lapointe · May 2021

So complete code was :

.add({
    name: 'UrssafFacPrint',
    type: 'datatable',
    className : 'hiddenDatatable',
    optionsPair: { value: 'ID' },
    footer: ["N°", "Client", "Date", "Banque", "Période", "Professions libérales-BNC (685)", "Ventes de marchandises-BIC (631)", "Prestations commerciales .....-BIC (646)"],
    config: {
        columns: [
            { title: 'N°', data: 'numFac' },
            { title: 'Client', data: 'cliAll' },
            { title: 'Date', data: 'datFac' },
            { title: 'Banque', data: 'datBqe' },
            { title: 'Période', data: 'perUrs' }
             
            ,{ title: "Professions libérales-BNC (685)",
                data: "typ_1",
                render: $.fn.dataTable.render.number( ' ', '.', 2, '', '€' ),
                className: "dt-body-right"
            }
 
            ,{ title: "Ventes de marchandises-BIC (631)",
                data: "typ_2",
                render: $.fn.dataTable.render.number( ' ', '.', 2, '', '€' ),
                className: "dt-body-right"
            }
 
            ,{ title: "Prestations commerciales .....-BIC (646)",
                data: "typ_3",
                render: $.fn.dataTable.render.number( ' ', '.', 2, '', '€' ),
                className: "dt-body-right"
            }
        ],
        footerCallback: function ( row, data, start, end, display ) {
            var api = this.api(), data;
            var total, pageTotal;
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
            for(var i=5, ien = api.columns().count(); i<ien; i++){
                pageTotal = api
                    .column( i, { page: 'current'} )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                total = api
                    .column( i )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                $( api.column( i ).footer() ).html(
                    '<div align=\'right\'>' + pageTotal.toFixed(2) +'€\n(' + total.toFixed(2) +'€ </div>'
                );
            }
        },
        select: false,
        searching: false,
        info: false
    }
})

colin · May 2021

Nice, thanks for reporting back,

Colin

Lapointe · May 2021

Hi @colin

Is there an option to show only global total (no pages total at least on print / export time) ?

Bob

colin · May 2021

Sorry, I'm not clear what you mean by that - probably me being daft. Could you update Kevin's example from before, please, as that would make it more obvious.

Colin

Lapointe · May 2021

hi @colin
When using print button for a dt as input each page printed display the global total report...
in this sample : http://live.datatables.net/vilatene/7/edit?html,css,js,output
I can't get print function (try to insert print.js as source but no more win)

so this link run http://live.datatables.net/vilatene/7/
In DT, footer is ok for each page...
At print time not...

Thanks

Bob

Lapointe · May 2021

In fact the page total printed is the last page total shown in dt...

allan · May 2021

Hah - I'd fully put Kevin and Colin up on the number one spot!

I think I understand what you are looking for here, but let me double check - this is a screenshot of part of the print view from your second link:

Taking the last column, are you saying you want it to show 20€ in the footer, since that is the sum of the rows that are shown on that sheet of paper only?

If so, that isn't related to using the DataTable as an input in the Editor form - rather it is that DataTables has no concept of sheets of paper pagination. It can't know that you can fit 15, or 10 or whatever rows onto a single sheet of A4, A5, Letter or whatever else you are printing on. Thus the footer total can't reflect that.

Or! Do you mean that it it shouldn't be showing the 225€ part at all? Just the sum total across all pages? If so, you'll need to use the footer format function of the export options (see this example) to have just the sum total of all pages.

Allan

Lapointe · May 2021

Hi @allan

Yes they (Kevin and Colin) are (for me) the best support members (after you of course)

I understand page sum (on print) is not easy to get.... So I use only global sum for paper reports...

Is there a way to print only footer at end of report (perhaps using paging false on dt control) ?

Thanks all
Bob

colin · May 2021

This thread should help - it's got the example in my comment at the end.

Colin

Lapointe · June 2021

Hi @colin

Thanks for help

Sorry but in this sample, pdf export run with footer on last page only.... but print do not...

colin · June 2021

Ah yep, this here seems to do it - I used Mikael's suggestion from SO,

Colin

Lapointe · June 2021

Hi @colin

Thanks for that...

Running perfectly.

I was thinking about this question was already in dt knowledge base so did not search elsewhere.

Best regards.

Bob

Can't get footer for Datatable as input

Can't get footer for Datatable as input

Answers

Howdy, Stranger!

Categories

DataTables

Can't get footer for Datatable as input

Can't get footer for Datatable as input

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables