Laravel-datatables: Footer callback and sum of rows value

Created on 5 Feb 2016  路  4Comments  路  Source: yajra/laravel-datatables

Hello! Can i add this to DataTables as a Service http://www.datatables.net/examples/advanced_init/footer_callback.html

When i try to add:

->parameters([
                '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( 4 )
                        .data()
                        .reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );

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

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

have error: Uncaught TypeError: b.fn.apply is not a function
and table not load.

Most helpful comment

@yajra ok, i do this in blade template:

@section('js')
    <script type="text/javascript" language="javascript" src="/plugins/datatables/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="/plugins/datatables/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" language="javascript" src="/plugins/datatables/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="/vendor/datatables/buttons.server-side.js"></script>
    <script>
        jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {
            return this.flatten().reduce( function ( a, b ) {
                if ( typeof a === 'string' ) {
                    a = a.replace(/[^\d.-]/g, '') * 1;
                }
                if ( typeof b === 'string' ) {
                    b = b.replace(/[^\d.-]/g, '') * 1;
                }

                return a + b;
            }, 0 );
        } );
    </script>
    {!! $dataTable->scripts() !!}
    <script>
        $(function() {
            var table = $('#dataTableBuilder').DataTable();
            $('#dataTableBuilder').on( 'draw.dt', function () {
                var tablesum = table.column(4).data().sum();
                $(".dataTables_info").append('. Sum of records per page ' + tablesum);
            } );
        });
    </script>
@stop

Thanks for the tip about draw.dt

All 4 comments

@ZAZmaster, footer callback is not yet supported on the builder. You may have to manually hook this to dt.draw event of dataTables.

@yajra ok, i do this in blade template:

@section('js')
    <script type="text/javascript" language="javascript" src="/plugins/datatables/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="/plugins/datatables/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" language="javascript" src="/plugins/datatables/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="/vendor/datatables/buttons.server-side.js"></script>
    <script>
        jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {
            return this.flatten().reduce( function ( a, b ) {
                if ( typeof a === 'string' ) {
                    a = a.replace(/[^\d.-]/g, '') * 1;
                }
                if ( typeof b === 'string' ) {
                    b = b.replace(/[^\d.-]/g, '') * 1;
                }

                return a + b;
            }, 0 );
        } );
    </script>
    {!! $dataTable->scripts() !!}
    <script>
        $(function() {
            var table = $('#dataTableBuilder').DataTable();
            $('#dataTableBuilder').on( 'draw.dt', function () {
                var tablesum = table.column(4).data().sum();
                $(".dataTables_info").append('. Sum of records per page ' + tablesum);
            } );
        });
    </script>
@stop

Thanks for the tip about draw.dt

Glad it worked for you!

i used this, though tweaked it abit.

Thanks @ZAZmaster and @yajra

Was this page helpful?
0 / 5 - 0 ratings

Related issues

FilipeBorges1993 picture FilipeBorges1993  路  3Comments

hohuuhau picture hohuuhau  路  3Comments

t0n1zz picture t0n1zz  路  3Comments

kamrava picture kamrava  路  3Comments

josiahke picture josiahke  路  3Comments