Datatable icon indicating copy to clipboard operation
Datatable copied to clipboard

Adding Sum Total to Footer using ->setCallBacks();

Open venhels opened this issue 11 years ago • 7 comments

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!

venhels avatar May 23 '14 23:05 venhels

Do you have fice columns where the fifth one is a integer?

Chumper avatar May 24 '14 09:05 Chumper

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!

venhels avatar May 24 '14 22:05 venhels

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?

Chumper avatar May 25 '14 16:05 Chumper

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

venhels avatar May 26 '14 05:05 venhels

i would need to look closer into this.

Chumper avatar Jun 03 '14 08:06 Chumper

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>

carlituxman avatar May 22 '17 16:05 carlituxman

ok great

global-pih avatar Nov 02 '17 11:11 global-pih