Display total sum data of column ?

Hi Eric,

thanks for your question, and sorry for the trouble.

I see two ways here:
If your data in that column is just numbers (and not currencies, for example), you could just use a formula inside the table cell, like
=SUM(B3:Z3)
according to https://tablepress.org/tablepress-features-formulas/

The other way would be to take the JS code from the page that you found, and adjust it to calculate the correct thing for your column. Then, you could take the entire "footerCallback": { ... }
code block, remove all line breaks from it and paste it into the “Custom Commands” textfield on the “Edit” screen of the table.

Regards,
Tobias

Sorry Tobias,
I have used =SUM(B3:Z3) but I can not keep this solution because I use filtering.

Can you help me because when i use this code, it disapear when i saving.

Screenshot https://prnt.sc/fwmigg

.tablepress-id-5 {
	"footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            /* Total over all pages */
            total = api
                .column( 5 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
 
            /* Update footer */
            $( api.column( 5 ).footer() ).html(
                '$'+pageTotal +' ( $'+ total +' total)'
            );
        }
    } );

Hi,

ok, in that case, the JavaScript approach is the best.
However, please don’t put this into the “Custom CSS” textfield on the “Plugin Options” screen!
It has to go into the “Custom Commands” textfield on the table’s “Edit” screen (after removing all line breaks).

Regards,
Tobias

I’m sorry to bother you but I do not know how to sum up a column in the footer. Have you ever tried?

I use first row for create pie graph but after if i can’t keep this solution because I use filtering function.
The first row is the sum of column, for example 46 ={SUM(G3:G599)}
https://prnt.sc/fxkb3i
https://prnt.sc/fxkjuu

I think that solution is to put in footer display the total data for a column.
I have tested to go into the “Custom Commands” textfield on the table’s “Edit” screen (). but all data are on the same line
https://prnt.sc/fxkz1o
I don’t understand “after removing all line breaks” ?
Syntax is it ok for datatable identification ?
according https://datatables.net/examples/advanced_init/footer_callback.html

.tablepress-id-5 {
	"footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;

Thanks

Hi,

no, I have never summed up a column as I didn’t have the need for that yet.

Basically, you have two options: If you want the sum of all rows, no matter what sorting or pagination is done on the frontend, use a formula like =SUM(B2:B25) (with the correct cells).

If you want this to be dynamic, like on https://datatables.net/examples/advanced_init/footer_callback.html , you need to use the JavaScript code from that page.
You need to take the code between "footerCallback": { ... } and adjust it to your needs (the code in the example calculates several values, and formats them as currencies, which you might not want/need). Then, take that modified, remove all line breaks (so that the code is just in one line), and paste that into the “Custom Commands” textfield (but with the .tablepress-id-5 { that you added, because that’s CSS code and not JavaScript).

Regards,
Tobias

HI,
i have update the code source

"footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            /* Total over all pages */
            total = api
                .column( 5 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
 
            /* Update footer */
            $( api.column( 5 ).footer() ).html(
                total +' total)'
            );
        }
    );

I copy this code to “Custom Commands” textfield without CR LF
"footerCallback": function ( row, data, start, end, display ) { var api = this.api(), data; total = api .column( 5 ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); $( api.column( 5 ).footer() ).html( total +' total)' ); } );

But i don’t have text value “Total” + value display on footer.

Where is the problem ?

Please
Thanks
Eric

Hi,

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Are you getting JavaScript errors in the error log console in the browser?

Regards,
Tobias

Hi Tobias,
thank you for your help.
I have created two pages TEST2 and Test3 with same informations just TABLE are different : Test2 have [table id=2] and TEST3 have [table id=3]

TEST2
Test3

I just copy this code to “Custom Commands” textfield without CR LF to [table id=3]
"footerCallback": function ( row, data, start, end, display ) { var api = this.api(), data; total = api .column( 5 ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); $( api.column( 5 ).footer() ).html( total +' total)' ); }

When i use this code filter menu don’t work.
I don’t have text value “Total” + value display on footer on column 5.

Thanks
Eric

Hi Eric,

in the JS error log console, I got an error that the intVal() function could not be found. So, that part of the code also has to be copied.
Please try again with

"footerCallback": function( row, data, start, end, display ) { var api = this.api(), data; var intVal = function ( i ) { return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0; }; total = api.column( 5 ).data().reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); $( api.column( 5 ).footer() ).html( total + ' total' ); }

In addition, your table does not have a table footer. You should add a new row to the end of the table and click the “Table Footer” row as well.

Regards,
Tobias

Great work TOBIAS, thank you very much.

1) I’m surprised, sum isn’t dynamic, if you select a value filter the sum don’t change. Is it possible to have dynamic function ?
https://prnt.sc/fy6jvu
Test3

2) I use this code "dom": "WBlfirtip" to “Custom Commands” textfield to display Button and filter like TEST2
How i can add this code with “footerCallback”: function

3) Is it possible to have sum for all column, what code modification ?

Thanks
Best regards
Eric

Hi Eric,

I’m afraid that I can really help with how the code itself works, but only with the integration into TablePress.
However, it looks like you had reduced the code to only calculate the total of all rows, not just the current. You will have to use the correct piece of code from your link.

For 2): Just add this before or after the calculation command, separated by a comma ,

Regards,
Tobias

OK for comma, sorry i have tested with ; and {}
How i can modified code to have dynamic function like Datatable

Thank you very much
Regards

Hi,

good to hear that this helped! ??

Best wishes,
Tobias

Hi Tobias,
good news, to have dynamic function for current page just add { page: 'current' change total = api.column( 4 ).data() to total = api.column( 4, { page: 'current'} ).data()

Is it possible to have code to paste it into the “Custom Commands” textfield to load an external JavaScript file code ?
Because it more easy to read and to add comment that single line.

Thanks for all
Best regards

Hi,

very nice! Yes, that seems like the best approach here ??

Unfortunately, I’m not aware of a way to load an external JS file in the “Custom Commands”. The only way that I can think of would be to stop using the DataTables integration that TablePress offers, but instead do all of it separately in an external file. You could for example copy/paste the current initialization code from the page’s HTML to a file. The problem then is that you would have to load the JS file into the page somehow.

Regards,
Tobias