I need footer callback for sum row and print button and not pagination in same time

Alphonse

My code is

$(document).ready(function() {
$('#example').DataTable( {

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

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };

        // Total over all pages
        total = api
            .column( 8 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( 8, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 8 ).footer() ).html(
            '$'+pageTotal +' ( $'+ total +' total)'
        );
    }
} );

} );

but when I try to add

$('#example').DataTable( {
buttons: [
'print'
]
} );

table not render corrctly

please help

kthorngren

table not render corrctly

Please be more specific about the problem. What doesn't render properly?

Did you add the code needed for the print button?
https://datatables.net/extensions/buttons/

Are you getting error messages in the browser's console?

Kevin

Alphonse

Normaly web page render good like

image1

after edit code to

<script>
$(document).ready(function() {
        dom: 'Bfrtip',
        buttons: [
            'print'
        ],
        
    $('#example').DataTable( {
        
        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            // Total over all pages
            total = api
                .column( 8 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Total over this page
            pageTotal = api
                .column( 8, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Update footer
            $( api.column( 8 ).footer() ).html(
                '$'+pageTotal +' ( $'+ total +' total)'
            );
        }
    } );

} );    
</script>

it look like
image 2

console error is

testdatatable.php:7799 Uncaught SyntaxError: Unexpected token :

tangerine

Fix the syntax error in your PHP file.

Alphonse

Nothing error if it only have footer callback
It error when added print button

kthorngren

This:

        dom: 'Bfrtip',
        buttons: [
            'print'
        ],

Needs to be within your Datatables config. Place it under:

    $('#example').DataTable( {

Kevin

Alphonse

It work
Thanks a lot
but when in print preview I got 2 problem
1 Table not fit and it cut off on right (image3)
2 It not show footer that sum num form row (image 4)

vaishnavkoka

@ kthorngren ,
I tried the following code and it doesn't work at all. Would you mind helping me out with this?
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };

        // Total over all pages
        total = api
            .column( 2 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( 2, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 2 ).footer() ).html(
            'gb'+pageTotal +' ( gb'+ total +' total)'
        );
    }
} );

} );

here is the sample image of output:
http://prntscr.com/k0orxe

colin

Hi @vaishnavkoka ,

This thread is over a year old, it would be best to raise this as a new thread. Also, we're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

sakthivignesh

i want to add multiple rows in footer section its possible?

colin

Yep, see here.