Chumper / Datatable

This is a laravel 4 package for the server and client side of datatables at http://datatables.net/
https://github.com/Chumper/Datatable
388 stars 153 forks source link

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

Open venhels opened 10 years ago

venhels commented 10 years ago

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!

Chumper commented 10 years ago

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

venhels commented 10 years ago

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!

Chumper commented 10 years ago

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?

venhels commented 10 years ago

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

Chumper commented 10 years ago

i would need to look closer into this.

carlituxman commented 7 years ago

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>
global-pih commented 6 years ago

ok great