title: Jquery Datatable Calculate Sum in footer while Searching :
body: <p><strong>Fiddle</strong>:  <a href="http://jsfiddle.net/6qLwkwud/43/" rel="nofollow noreferrer">http://jsfiddle.net/6qLwkwud/43/</a></p>
  
  <p>I want to add a total on filtered records while searching on a datatable.</p>
  
  <p>Adding the initial total to the footer was quite easy but I am facing issues while recalculating sum in <code>search.dt</code> event. </p>
  
  <p>From the logs I see this error : </p>
  
  <blockquote>
    <p>TypeError: table.api is not a function</p>
  </blockquote>
  
  <p>I think the <code>this</code> reference in <code>initComplete</code> works for me initially.
  Now How do I get this reference inside  <code>search.dt</code> event ? </p>
  
  <p><strong>Note</strong> : I have gone through this <a href="https://stackoverflow.com/questions/26307622/summing-a-filtered-column-in-datatables">Summing a filtered column in DataTables</a>.
  but it does not solve my purpose as I am using classes to denote my columns where I want to apply. &amp; in my table I don't know how many columns would have that attribute.</p>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>&lt;table id="example"&gt;
      &lt;thead&gt;
          &lt;tr&gt;&lt;th class="sum"&gt;a column&lt;/th&gt;
          &lt;th class="sum"&gt;b column&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;&lt;td &gt;10&lt;/td&gt; &lt;td&gt;15&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;10&lt;/td&gt; &lt;td&gt;18&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;20&lt;/td&gt; &lt;td&gt;20&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;20&lt;/td&gt; &lt;td&gt;25&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;30&lt;/td&gt; &lt;td&gt;28&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;30&lt;/td&gt; &lt;td&gt;30&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
      &lt;tr&gt;
        &lt;th&gt;
  
        &lt;/th&gt;
        &lt;th class="Int"&gt;
  
        &lt;/th&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Script :</strong> </p>
  
  <pre><code>var table = $("#example").DataTable({
   "initComplete": function (settings, json) {
   var api = this.api();
   CalculateTableSummary(this);
  }
  });
  
  $("#example").on('search.dt', function() {
      CalculateTableSummary(table);  
  });
  
  
  
  function CalculateTableSummary(table) {
      try {
  
          var intVal = function (i) {
              return typeof i === 'string' ?
                      i.replace(/[\$,]/g, '') * 1 :
                      typeof i === 'number' ?
                          i : 0;
          };
  
          var api = table.api();
          api.columns(".sum").eq(0).each(function (index) {
              var column = api.column(index);
  
              var sum = column
                 .data()
                 .reduce(function (a, b) {
                     //return parseInt(a, 10) + parseInt(b, 10);
                     return intVal(a) + intVal(b);
                 }, 0);
  
  
  
              if ($(column.footer()).hasClass("Int")) {
                  $(column.footer()).html('' + sum.toFixed(0));
              } else {
                  $(column.footer()).html('' + sum.toFixed(2));
              }
  
          });
      } catch (e) {
          console.log('Error in CalculateTableSummary');
          console.log(e)
      }
  }
  </code></pre>