How to sum the current page of footerCallback function.

Kaung

Hello all , I have a problem with Footercallback function. Calculated total is for all over the page value , not for current page. How can i sum the current page for footercallback funtion? Whatever i changed the the page the total amount is the same . Here my code.

$(document).ready(function() {
   
    $('#tbl-treport').dataTable({
        
      
        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(),data;
 
            // converting to interger to find total
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            // computing column Total of the complete result 
           
                
        var from_amount_in_sgd = api
                .column( 8 , { page: 'current'}  )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                },0);
                
var numFormat = $.fn.dataTable.render.number( '\,', '.', 3).display;
     
            $( api.column( 6 ).footer() ).html("Total Amount");
          
            $( api.column( 8 ).footer() ).html(numFormat(from_amount_in_sgd));

 },
      
       
    } );

} );

colin

Hi @Kaung ,

That looks OK - it's pretty much the same as the example here. Would you be able to make a live example that demonstrates the problem - it'll be easier to diagnose.

Cheers,

Colin

Kaung

Hi @colin

Ya i also try with as a example. But it does not ok. When i change page 1 to 2 the total amount still the same . Should be change right? Thanks.

Kaung

colin

Hi @Kaung ,

For me, on that example, whenever I change page the footer value is updating - see the two screenshots!

If it's not for you, then something odd is going on. Can you try again please, and if no success, let us know your OS and browser.

Cheers,

Colin

Kaung

Hi @colin Thanks for your effort. Here is mine.

Here is another page 2

thanks.

Kaung

@colin My OS is Window 10 and Browser is firefox , chrome also. Thanks.

Kaung

Hi @colin what i realized is that my amount is calculated only for last page for example 5. It only calculated for page 5. So how should i fixed it.

colin

I'm getting a bit muddled - I thought you were saying the link that I gave wasn't working for you, or is it just your own table?

Looking at your images, you've only got 8 colulmns, but you're using this on your sum:

.column( 8 , { page: 'current'}  )

Note, the columns are standard JS numbering, starting from 0 - so unless you've got a hidden column, that'll be the cause of the problem.

Cheers,

Colin

Kaung

Hi @colin No sir actually i have 13 columns i just crop my table. Just now is total amount is calculated only for last page . Above the photo it only calculated page 5 only. I also muddled too .

Kaung

Hi @colin When i try my jquery in your testing site it is ok .It works fine. But how come it does not work on mine ?

colin

Checked again, it does look like it should work. Could you link to your page, or try to recreate in a test case on the live site - that would help debug it.

Cheers,

Colin

Kaung

Hi @colin Thanks. it works. The problem is i have the code like this
$("#tbl-treport").dataTable().fnDestroy();

because i need to avoid this error

Now calculation is ok . But i have the above problem . Whenever i open to my report. That error is shown. Sorry for disturb u sir. Thanks.

Kaung

Hi @colin i know it.
I got the answer because of this line of code. $("#tbl-treport").dataTable().fnDestroy();

so need to change $("#tbl-treport").dataTable().Destroy();

So it works now. Thanks.

colin

Hi @Kaung ,

That's progress That other message will come up when you initialise the table twice - you can only do it the once. See the tech note here - it's the same as the link in the error.

Cheers,

Colin