title: How can I add a subtotal and a grandtotal to my table using DataTables "jQuery Plug-in?"
body: <p>I am trying to use <a href="https://datatables.net/" rel="nofollow">Datatables</a> plug-in to display data for a report.</p>
  
  <p>I like to add 2 footer rows to my table, the first one for a subtotal "totals from the current page" and another row for Granttotal "Totals from all the pages"</p>
  
  <p>I followed this <a href="https://datatables.net/examples/advanced_init/footer_callback.html" rel="nofollow">example</a> in the docs to attempt to add the rows, but for some reason the footer is not showing up.</p>
  
  <p>I populate the datatable on the fly using Ajax Request after the DataTable is initilized. Below is my current code.</p>
  
  <p>Here is my Html markup</p>
  
  <pre><code>&lt;table id="reportTable" class="table table-striped " cellspacing="0" style="width: 100%;"&gt;
      &lt;thead&gt;&lt;/thead&gt;
      &lt;tbody&gt;&lt;/tbody&gt;
      &lt;tfoot&gt;&lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is my JavaScript code</p>
  
  <pre><code>$(function(e) {
  
      $(window).load(function (e) {
  
          $('#reportTable').DataTable({
              pageLength: 50,
              lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000],
              order: [   [ 2, 'desc' ]  ],
              columns: [
                  { data: 'chain_name', title: 'Chain Name', width: '20%'},
                  { data: 'store_id' , title: 'Store Number' },
                  { data: 'completed', title: 'Total Completed' },
                  { data: 'initial_quota', title: 'Target To Complete' },
                  { data: 'total_callable', title: 'Total In Queue' },
                  { data: 'current_status', title: 'Current Status' },
                  { data: 'wgtstamp', title: 'Weight' }
              ]
              ,
              footerCallback: function (row, data, start, end, display) {
                  var api = this.api(), data, ;
  
                  // Remove the formatting to get integer data for summation
                  var intVal = function (i) {
                      return typeof i === 'string' ?
                          i.replace(/[\$,]/g, '') * 1 :
                          typeof i === 'number' ?
                          i : 0;
                  };
  
                  // Total over all pages
                  var completedSubTotal = api
                      .column(2)
                      .data()
                      .reduce(function (a, b) {
                          return intVal(a) + intVal(b);
                      }, 0);
  
                  // Total over this page
                  var completedGrandTotal = api
                      .column(2, { page: 'current' })
                      .data()
                      .reduce(function (a, b) {
                          return intVal(a) + intVal(b);
                      }, 0);
  
                  // Update footer with a subtotal
                  $(api.column(2).footer()).html(completedSubTotal);
  
                  // Update footer with a grand total
                  $(api.column(2).footer()).html(completedGrandTotal);
              }
  
  
          });
      });
  
  
      $('input:search').on('keyup', function () {
          $('#reportTable').DataTable().search(this.value).draw();
      });
  
      $('#CampaignMenu').change(function(e) {
  
          $('#reportTable').DataTable().clear().draw();
          var campId = $(this).val();
  
          if (campId != '0') {
  
              $.ajax({
                  type: 'POST',
                  url: '@Url.RouteUrl("AccountQuotaDashboard.GetReportData")',
                  data: { 'campaign_id': campId },
                  dataType: 'json',
                  success: function (json) {
  
                      if (json &amp;&amp; !$.isEmptyObject(json)) {
  
                          var table = $('#reportTable').dataTable().fnAddData(json);
  
                      }
  
                  }
              });
  
          }
  
      });
  
  });
  </code></pre>
  
  <p>How can I correctly add 2 footer row to my data table?</p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>I created a filddle to show you the code in action <a href="http://live.datatables.net/yubuyewi/2" rel="nofollow">http://live.datatables.net/yubuyewi/2</a> . As you can see everything is working except for the total rows</p>