footerCallback manipulation

Ajax Get summary info with data (dataSrc)

            "ajax": {
                'url': base_url + 'admin/order/all',
                'data': function(d){
                    var $c = $('.buttons_panel');
                    d.from = get_value('from', $c);
                    d.to = get_value('to', $c);
                    d.status = get_value('status', $c);
                    d.pay_method = get_value('pay_method', $c);
                },
                'dataSrc': function(data){
                    summary = data.extra;
                    return data.data;
                }, 
                "cache": false,
            },

footerCallback

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

                $( api.column( 7 ).footer() ).html(
                    summary['sell_qty']
                );

                $( api.column( 9 ).footer() ).html(
                    summary['buy_qty']
                );

                $( api.column( 10 ).footer() ).html(
                    '$'+ summary['subtotal']
                );

                $( api.column( 11 ).footer() ).html(
                    '$'+ summary['amount']
                );
            }

tfoot

<tfoot data-count="{{ $col_count }}">
                <tr role="row">
                    @for($i = 0; $i < $col_count; $i++)
                      <th></th>
                    @endfor
                </tr>
            </tfoot>

Reference:

  1. dataSrc:
    https://datatables.net/reference/option/ajax.dataSrc
  2. dataSrc example:
    http://live.datatables.net/sagujiza/1/edit