Datatable
Datatable copied to clipboard
Adding Sum Total to Footer using ->setCallBacks();
Good day! How can I add a sum total value on to footer using ->setCallBacks method;
I tried copy/paste the code from: http://datatables.net/examples/advanced_init/footer_callback.html
But it doesnt show anything, here's How I did it:
my controller:
public function getSales()
{
$sales = DB::table('viewsaleshistory');
return Datatable::query($sales)
->addColumn('Name',function($model)
{
$html = $model->ordered_by;
return $html;
})
->addColumn('data',function($model)
{
$salesTotal =intval($model->st);
// $type = "<span> ".gettype($salesTotal)."</span>".$salesTotal;
return $salesTotal;
})
->addColumn('%',function($model)
{
$percentage = "<span id='pa-".$model->ordered_by."'>".($model->st/500)*100 ."</span>";
return $percentage;
})
->addColumn('sell',function($model)
{
$sell = $model->noOfSell;
return $sell;
})
->searchColumns(array('ordered_by'))
->orderColumns('st')
->make();
}
my view:
{{ HTML::script('js/dataTable/jquery.datatable.js') }}
<?php echo HTML::flash(); ?>
{{ Datatable::table()
->addColumn('PA','Total Sales','%','Sales Count') // these are the column headings to be shown
->setUrl('api/getSales') // this is the route where data will be retrieved
->setCallbacks('FooterCallback', "function ( row, data, start, end, display ) {
var api = this.api();
// Remove the formatting to get integer data for summation
alert('callback function executing?');
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
//Total over all pages
var total = api
.column(1)
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
} );
// Total over this page
var pageTotal = api
.column( 1, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
} );
// Update footer
$( api.column(1).footer() ).html(
'$'+pageTotal +' ( $'+ total +' total)'
);
}")
->render();
}}
there is no error on it but, its not working too. any advice please!
Do you have fice columns where the fifth one is a integer?
Good day sir Chumper, Thanks for your reply, I only have 4 columns on my table so I tried changing the value from " api.column(4)" to "api.column(1)"->I guess its my 2nd column? and my 2nd column is a string and then I tried to to convert it to int using intval from the controller, but still nothing changes.
I also tried adding some alert and console.log inside the callback function but its not working too, I think its not executing the function thats why. I have updated my code above so you can see what changes I did. thank you for your time!
First thing i see is your return html in your second column which can not be parsed by the callback method. May you try just a number?
Ok, I tried changing the second column's return value to a static number, but then still nothing happens, Im also wondering why console.log and alert()'s are not being executed. maybe the function is not being executed at all. what do you think?
my 2nd column:
->addColumn('data',function($model)
{
// $salesTotal =intval($model->st);
// $type = "<span> ".gettype($salesTotal)."</span>".$salesTotal;
$salesTotal = '$100.13';
return $salesTotal;
})
and
->addColumn('data',function($model)
{
// $salesTotal =intval($model->st);
// $type = "<span> ".gettype($salesTotal)."</span>".$salesTotal;
$salesTotal = 100.13;
return $salesTotal;
})
still nothings happen. :/
actually all I just wanted is to show the sum total at the end of the column. is there other way that is easier to implement that this? :) thanks
i would need to look closer into this.
you need in the table template has tfoot tag, for example between thead and the body:
<tfoot>
<tr>
@foreach($columns as $i => $c)
<td></td>
@endforeach
</tr>
</tfoot>
ok great