title: Replace the footer row with javascript to display automatically
body: <p>I have a question. So I want to display the total number on footer of the DataTable. May I know how to display the javascript function, $(document).ready(function() on the footer automatically without have to add the  function on the footer in case there's increment of the new row.</p>
  <p>I have been trying rename the $(document).ready(function() with this $(document).ready(function(TotalQuantity()) and put like this</p>
  <pre><code>   &lt;tfoot&gt;
     &lt;tr&gt;
       &lt;?php
       TotalQuantity();
       ?&gt;
     &lt;/tr&gt;
   &lt;/tfoot&gt;
  </code></pre>
  <p>and it's still not display the total number. Any help would be greatly appreciated.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    var table = $('#example').DataTable( {
      initComplete: function(settings, json) {
        // calculate the sum when table is first created:
        doSum();
      }
    } );
  
    $('#example').on( 'draw.dt', function () {
      // re-calculate the sum whenever the table is re-displayed:
      doSum();
    } );
  
    // This provides the sum of all records:
    function doSum() {
      // get the DataTables API object:
      var table = $('#example').DataTable();
      // set up the initial (unsummed) data array for the footer row:
      var totals = ['','Totals',0,0,0,0,0,0,0,''];
      // iterate all rows - use table.rows( {search: 'applied'} ).data()
      // if you want to sum only filtered (visible) rows:
      totals = table.rows( ).data()
        // sum the amounts:
        .reduce( function ( sum, record ) {
          for (let i = 2; i &lt;= 8; i++) {
            sum[i] = sum[i] + numberFromString(record[i]);
          } 
          return sum;
        }, totals ); 
      // place the sum in the relevant footer cell:
      for (let i = 1; i &lt;= 8; i++) {
        var column = table.column( i );
        $( column.footer() ).html( formatNumber(totals[i]) );
      }
    }
  
    function numberFromString(s) {
      return typeof s === 'string' ?
        s.replace(/[\$,]/g, '') * 1 :
        typeof s === 'number' ?
        s : 0;
    }
  
    function formatNumber(n) {
       return n.toLocaleString(); // or whatever you prefer here
    }
  
  } );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Demo&lt;/title&gt;
    &lt;script src="https://code.jquery.com/jquery-3.5.0.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div style="margin: 20px;"&gt;
  
      &lt;table id="example" class="display dataTable cell-border" style="width:100%"&gt;
                                                  &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="text-center"&gt;&lt;input type="checkbox" class="selectAll" name="selectAll" value="all"&gt;&lt;/th&gt;
              &lt;th&gt;ID&lt;/th&gt;
              &lt;th&gt;Fee1&lt;/th&gt;
              &lt;th&gt;Fee2&lt;/th&gt;
              &lt;th&gt;Fee3&lt;/th&gt;
              &lt;th&gt;Fee4&lt;/th&gt;
              &lt;th&gt;Fee5&lt;/th&gt;
              &lt;th&gt;Fee6&lt;/th&gt;
              &lt;th&gt;Sub Total&lt;/th&gt;
              &lt;th&gt;Copy&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;AF-01&lt;/td&gt;
              &lt;td&gt;100,001&lt;/td&gt;
              &lt;td&gt;100,002&lt;/td&gt;
              &lt;td&gt;100,003&lt;/td&gt;
              &lt;td&gt;100,004&lt;/td&gt;
              &lt;td&gt;100,005&lt;/td&gt;
              &lt;td&gt;100,006&lt;/td&gt;
              &lt;td&gt;100,007&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
                &lt;td&gt;&lt;/td&gt;
                &lt;td&gt;AF-01&lt;/td&gt;
                &lt;td&gt;100,000&lt;/td&gt;
                &lt;td&gt;100,000&lt;/td&gt;
                &lt;td&gt;100,000&lt;/td&gt;
                &lt;td&gt;100,000&lt;/td&gt;
                &lt;td&gt;100,000&lt;/td&gt;
                &lt;td&gt;100,000&lt;/td&gt;
                &lt;td&gt;100,000&lt;/td&gt;
                &lt;td&gt;&lt;/td&gt;
            &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;tfoot&gt;
              &lt;tr&gt; &lt;!-- how display the js function not manually --&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
      &lt;/table&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>