laravel - Cumulative Running Balance column with previous total

Question

I have a Laravel accounting project. In ledger section it have "Debit", "Credit", and "Blance" column. I need calculation with debit and credit column and show it Balance column. I am trying to do it with datatable. But my last balance show in the bottom of balance column. I need it top. Please see the attach image for more clearence.

In my view file:

<table class="table table-bordered table-hover table-center"   id="tablename" width="100%">
    <thead>
    <tr>
        <th>Date</th>
        <th>Description</th>
        <th>Payment Type</th>
        <th>Ref</th>
        <th>Debit</th>
        <th>Credit</th>
        <th>Total Balance</th>

    </tr>
    </thead>
    <tbody>

    <?php
    $balance = 0;
    ?>

    @forelse ($ledgers as $ledger)

        <tr>
            <th>{{$ledger->t_date}}</th>
            <th>{{$ledger->description}}</th>
            <th>{{$ledger->payment_type}}</th>
            <th>{{$ledger->ref}}</th>
            @if((($ledger->table_type == 'Expense') && ($ledger->transaction_type == 'Prepaid Adjust' || $ledger->transaction_type == 'Current' || $ledger->transaction_type == 'Due'|| $ledger->transaction_type == 'Payment')) || (($ledger->table_type == 'Asset') && ($ledger->transaction_type == 'Adjust' )))
                <th>{{$ledger->at_amount}}</th>
                @if($ledger->table_type == 'Expense')
                <?php $balance = $ledger->at_amount + $balance;?>
                    @else
                    <?php $balance = $balance - $ledger->at_amount;?>
                    @endif
            @else

                <th></th>
            @endif

            @if((($ledger->table_type == 'Income') && ($ledger->transaction_type == 'Advance Adjust'|| $ledger->transaction_type == 'Current' || $ledger->transaction_type == 'Due')) || (($ledger->table_type == 'Expense') && ($ledger->transaction_type == 'Account Payable' )))
                <th>{{$ledger->at_amount}}</th>
                @if($ledger->table_type == 'Income')
                <?php $balance =   $ledger->at_amount + $balance;?>
                    @else
                    <?php $balance = $balance -  $ledger->at_amount;?>
                @endif

            @else
                <th></th>
            @endif
            <th>{{ $balance }} </th>
        </tr>
    @empty
    @endforelse

Javascript:

<script>
$(document).ready(function(){
    
    var branch_name = 'Branch: '+{!! json_encode(auth()->user()->branch->branch_name) !!};
    var branch_phone = 'Phone: '+{!! json_encode(auth()->user()->branch->branch_phone) !!};
    var branch_address = 'Address: '+{!! json_encode(auth()->user()->branch->branch_address) !!};
    var title = 'Report: '+{!! json_encode($title) !!};
    var data = 'Data: '+{!! json_encode($fromDate) !!}+' '+{!! json_encode($toDate) !!};
    
    $('#example').DataTable({
        pageLength: 25,
        responsive: true,
        columnDefs: [ { type: 'date', 'targets': [0] } ],
        order: [[ 0, 'desc' ]],
        dom: '<"html5buttons"B>lTfgitp',
        buttons: [
            {extend: 'copy'},
            {extend: 'excel', title: title},
            {extend: 'pdfHtml5',
            title: 'Report',
            orientation : 'landscape',
                header:true,
                customize: function ( doc ) {
                    doc.content.splice(0, 1, {
                            text: [
                                       { text: branch_name+'
',bold:true,fontSize:15 },
                                       { text: branch_phone+'
',italics:true,fontSize:12 },
                                       { text: branch_address+'
'+'
',italics:true,fontSize:12 },
                                       { text: data+'
',bold:true,fontSize:12 },
                                       { text: title+'
',bold:true,fontSize:15 }

                            ],
                            margin: [0, 0, 0, 12],
                            alignment: 'center'
                        });
                    doc.defaultStyle.alignment = 'center'
                } 
            },
            {extend: 'print',
                customize: function (win){
                $(win.document.body).addClass('white-bg');
                $(win.document.body).css('font-size', '10px');
                $(win.document.body).find('table')
                .addClass('compact')
                .css('font-size', 'inherit');
            }
            }
        ]
    });

My output show calculation from top to bottom (Last balance show bottom): I need calculation from bottom to top (Last balance will show top):

My output image: click

I need out put like this image:

Answer 1

等待大神解答