Can't get footer for Datatable as input

Can't get footer for Datatable as input

LapointeLapointe Posts: 368Questions: 70Answers: 4
edited April 29 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 an accepted answers - jump to answer

Answers

  • zgoforthzgoforth Posts: 269Questions: 29Answers: 1

    Can you please provide a test case or example?

  • LapointeLapointe Posts: 368Questions: 70Answers: 4

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

  • kthorngrenkthorngren Posts: 12,525Questions: 25Answers: 2,952

    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: 368Questions: 70Answers: 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: 12,525Questions: 25Answers: 2,952

    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: 11,519Questions: 0Answers: 1,964

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

    Colin

  • LapointeLapointe Posts: 368Questions: 70Answers: 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: 11,519Questions: 0Answers: 1,964
    Answer ✓

    Ha, guessing Allan deserves the #1 spot :)

  • LapointeLapointe Posts: 368Questions: 70Answers: 4
    edited April 30

    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: 12,525Questions: 25Answers: 2,952

    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: 368Questions: 70Answers: 4
    edited April 30

    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: 368Questions: 70Answers: 4
    edited May 4

    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: 11,519Questions: 0Answers: 1,964

    Nice, thanks for reporting back,

    Colin

  • LapointeLapointe Posts: 368Questions: 70Answers: 4

    Hi @colin

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

    Bob

  • colincolin Posts: 11,519Questions: 0Answers: 1,964

    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

Sign In or Register to comment.