I have written the server-side scripting to show a large amount of data and it's working fine, but I want to show the sum in the footer of the points column. The code is written in a laravel blade file.

The footer calls back function, not working it is showing me an error ie an undefined length object, please let me know where I am making the mistake.

<table class="table table-bordered yajra-datatable" width="100%" style="color:#8D1B6B;margin-top:20px;">
    <thead>
        <tr>
            <td><b>Sr No</b></td>
            <td><b>Date</b></td>
            <td><b>Activity Name</b></td>
            <td><b>Activity Marks</b></td>
            <td><b>My Rewards</b></td>
        </tr>
    </thead>
<tbody>

</tbody>
<tfoot>

</tfoot>
</table>

The script written for the above code is

<script>
        $(document).ready(function(){
            var table = $('.yajra-datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('abc') }}",
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                    {data: 'activityDate', name: 'activityDate'},
                    {data: 'activity', name: 'activity'},
                    {data: 'point', name: 'point'},
                    {
                        data: 'action',
                        name: 'action',
                        orderable: true,
                        searchable: true
                    },
                ],
                "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
                    data = api.column( 3 ).data();

                    total = data.length ? data.reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }) : 0;

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

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

           
        });
    </script>