Can't get footer for Datatable as input

Can't get footer for Datatable as input

LapointeLapointe Posts: 430Questions: 81Answers: 4
edited April 2021 in Editor

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

This question has accepted answers - jump to:

Answers

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    Can you please provide a test case or example?

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

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

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

    Kevin

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    Ha, guessing Allan deserves the #1 spot :)

  • LapointeLapointe Posts: 430Questions: 81Answers: 4
    edited April 2021

    Yes indeed. B)

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4
    edited 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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4
    edited 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
        }
    })
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Nice, thanks for reporting back,

    Colin

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @colin

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

    Bob

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4
    edited 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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4
    edited May 2021

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

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @colin

    Thanks for help

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

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

    Colin

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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 B)

Sign In or Register to comment.