title: DataTables.net table column sum in footer
body: <p>I'm having issues with a tiny detail in inserting the sum value of each column, with class "sum", into its footer.</p>
  
  <p>The code (more or less taken straight from DataTables.net) goes:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var table = $('#example').DataTable();
          table.columns('.sum').each(function (el) {
              var sum = table
                  .column(el)
                  .data()
                  .reduce(function (a, b) {
                      return parseInt(a, 10) + parseInt(b, 10);
                  });
              $(el).html('Sum: ' + sum);
          });</code></pre>
  </div>
  </div>
  </p>
  
  <p>"sum" has the correct value but is somehow not inserted into the footer! I.e. its -element shows up empty.</p>
  
  <p>Note that the snippet below works fine, but I want to sum each column with class sum.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var table = $('#example').DataTable();
  var column = table.column(4);
  
  $(column.footer()).html(
      column.data().reduce(function (a, b) {
          return parseInt(a, 10) + parseInt(b, 10);
      })
  );</code></pre>
  </div>
  </div>
  </p>
  
  <p>////////////////////////////////////////////////////////////////////////////////////</p>
  
  <h1>EDIT - Workaround:</h1>
  
  <p>I moved the code to where the DataTable is initialized and went with footerCallback instead. See below code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>"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 this page
                      pageTotal = api
                          .column('.sum', { page: 'current' })
                          .data()
                          .reduce(function (a, b) {
                              return intVal(a) + intVal(b);
                          }, 0);
  
                      // Update footer
                      $(api.column('.sum').footer()).html(pageTotal);
                  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Somehow now the value is inserted into the right tfoot element. Still no idea why it wouldn't work in the first place (but as mentioned in comment order of including JS-files could have had to do with some of it).</p>
  
  <p>Now I just have to figure out how to loop multiple columns with class="sum"...</p>