footerCallback doesn´t sum columns on Server-Side response

PakoAlanis

Hi... i want to sum a column using footerCallback but it only sum the "Current Page" and i want to sum all pages... how i do that?... i´m using the datatable example but with a ajax server-side.

var table = $('#existencias-cart-table').DataTable({
    "language": {
            "lengthMenu": "Ver _MENU_ registros",
            "zeroRecords": "No hay registros",
            "info": "Mostrando página _PAGE_ de _PAGES_",
            "infoEmpty": "No hay registros",
            "infoFiltered": "(Filtrado de _MAX_ registros )",
            "search": "Buscar"},
    "order": [[ 0, "ASC" ]],
    "processing": true,
    "serverSide": true, 
     "scrollX": false,
    "ajax": {
            "url": "existencias_json.php",
            "type": "POST",
            "data": {},
        },  
  "footerCallback": function ( row, data, start, end, display ) {
          var api = this.api(), data;

          var intVal = function ( i ) {
              return typeof i === 'string' ?
                  i.replace(/[\$,]/g, '')*1 :
                  typeof i === 'number' ?
                      i : 0;
          };

          ent = api
              .column( 2 )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0 );

          sal = api
              .column( 3 )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0 );

          exi = api
              .column( 4 )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0 );

          apd = api
              .column( 5 )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0 );

          dis = api
              .column( 6 )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0 );

        $( api.column( 2 ).footer() ).html(ent);
        $( api.column( 3 ).footer() ).html(sal);
        $( api.column( 4 ).footer() ).html(exi);
        $( api.column( 5 ).footer() ).html(apd);
        $( api.column( 6 ).footer() ).html(dis);
      }     

});

kthorngren

You will need to perform the summing in your server script. You can return the summed data as a separate object with the server side processing data, for example:

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        ["Airi", "Satou", "Accountant", "Tokyo", "28th Nov 08", "$162,700"],
                .....
        ["Cedric", "Kelly", "Senior Javascript Developer", "Edinburgh", "29th Mar 12", "$433,060"]
    ],
        col1Sum: 40000
        col2Sum: 8573
}

Then access the col1Sum and col2Sum objects using ajax.json in the footerCallback.

Kevin

PakoAlanis

Thanks Kevin, that i tought but i don´t know how to read that new parameters in the json response... i will try.

kthorngren

Use something like var json = api.ajax.json(); in the footerCallback. Use console.log(json); to see the structure of the json data.

Kevin

PakoAlanis

yea!!... that was the solution... thanks again Kevin!!

  "footerCallback": function ( row, data, start, end, display ) {

      var rsTot = table.ajax.json();      
      var api = this.api(), data;

      $( api.column( 2 ).footer() ).html(rsTot.ent);
      $( api.column( 3 ).footer() ).html(rsTot.sal);
      $( api.column( 4 ).footer() ).html(rsTot.exi);
      $( api.column( 5 ).footer() ).html(rsTot.apd);
      $( api.column( 6 ).footer() ).html(rsTot.dis);

  }