title: DataTables pipeline total over all pages
body: <p>I've implemented the <a href="https://datatables.net/release-datatables/examples/server_side/pipeline.html" rel="nofollow noreferrer">pipelining example</a> of DataTables on my page and I want to know who to do I access the json_encode values that are returned to the browser</p>
  
  <p>I want to calculate the total of a particular column of returned values so I can display it to the user as a total of all the pages.</p>
  
  <p>My jquery code</p>
  
  <pre><code>table = $('#table').DataTable( {
      "processing": true,
      "serverSide": true,
      "ajax": $.fn.dataTable.pipeline( {
          url: "&lt;?php echo site_url('test/proj_time_spent')?&gt;/" + projectNum +"/" + VO,
          pages: 6 // number of pages to cache
      } ),
  
      "footerCallback": function () {
          var api = this.api(), data;
  
          // Remove the formatting to get integer data for summation
          var intVal = function ( i ) {
              return typeof i === 'string' ?
                  i = (Number(i.substr(i.indexOf("&gt;")+1,2))* 3600 + Number(i.substr(i.indexOf(":") + 1,2)) *60 ) / 3600:
                  typeof i === 'number' ?
                      i : 0;
          };
  
          var pageTotal;
          var colTotal;
  
          for($i = 4; $i &lt;= 4; $i++){
          // Total over this page
          pageTotal = api
              .column( $i, { page: 'current'} )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0 );
  
          // Total over all pages
          // still returns the same value as the page total above
          colTotal = api
              .column( $i) 
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0 );
  
          // Update footer of Value
          $( api.column( $i ).footer() ).html(
              pageTotal.toFixed(1) + ' hours &lt;br&gt;(' + colTotal.toFixed(1) + ' hours)' 
          );
          }
      }
  } );
  } );
  </code></pre>
  
  <p>Now I have intrigued the code a little and I see that what DataTables is just using the 10 entires on the page, not the full xhr returned data in cache.</p>
  
  <p><strong>Edit My answer</strong></p>
  
  <p>I set the number of pages to 1000 so the number of records that are drawn are 1000x10 = 10000, but my records will be less then 10000.</p>
  
  <pre><code>// Pipelining function for DataTables. To be used to the `ajax` option of DataTables
  //
  $.fn.dataTable.pipeline = function ( opts ) { ...
  
  //rest of code for pipeline example
  ....
  settings.jqXHR = $.ajax( {
              "type":     conf.method,
              "url":      conf.url,
              "data":     request,
              "dataType": "json",
              "cache":    false,
              "success":  function ( json ) {
                  cacheLastJson = $.extend(true, {}, json);
                  chart_data = cacheLastJson;
                  if ( cacheLower != drawStart ) {
                      json.data.splice( 0, drawStart-cacheLower );
                  }
                  if ( requestLength &gt;= -1 ) {
                      json.data.splice( requestLength, json.data.length );
                  }
                  colTotal = 0;
                  records = (cacheLastJson.recordsTotal !== cacheLastJson.recordsFiltered)? cacheLastJson.recordsFiltered : cacheLastJson.recordsTotal;
                  for ( var i = 0; i &lt; records; i++){
  
                      colTotal += (Number(cacheLastJson.data[i][4].substr(-5,2))*3600 + Number(cacheLastJson.data[i][4].substr(-2,2))*60)/3600;
                  }
  
                  drawCallback( json );
              }
          } );
  
  //remainder of code from example
  </code></pre>