title: Jquery DataTable column Sum
body: <p>I just refer <a href="https://datatables.net/examples/advanced_init/footer_callback.html" rel="nofollow noreferrer">this link</a> to get idea how to get the column total in jquery data tables. But I have done half of my project. I do not have any definition in html page. all include in Jquery side.</p>
  
  <p>In HTML</p>
  
  <pre><code> &lt;table id="tblCollection" class="display" cellspacing="0" width="100%"&gt;
                                          &lt;/table&gt;
  </code></pre>
  
  <p>Defined data table like below in Jquery.</p>
  
  <pre><code>   tblColectionData = $("#tblCollection").DataTable({
          "ordering": true,
          columns: [
              { title: 'OrderId', data: 'OrderId' },
              { title: 'Ordered Date', data: 'OrderPlaceDateTime' },
              { title: 'Customer Name', data: 'CustomerName' },
              { title: 'Restaurant Name', data: 'RestaurantName' },
              { title: 'Order Total', data: 'OrderTotalAmount' }
          ],
      });
  </code></pre>
  
  <p>How to add <strong>footerCallback</strong> part in my case? The example in web link is defined the total in <em>tfoot</em>. In my case it is not. How to do this?</p>
  
  <blockquote>
    <p>EDIT 1</p>
  </blockquote>
  
  <p>Fill data to datatable</p>
  
  <pre><code>$.ajax({
      type: 'post',
      url: serverLocation + "/api/dashboard/getOrderData",
      dataType: 'json',
      data: JSON.stringify(reqJson),
      contentType: "application/json; charset=UTF-8",
      success: function (response) {
          tblColectionData.clear().draw();
          tblColectionData.rows.add(response).draw();
      },
      error: function (textStatus, errorThrown) {
          console.log('Err');
      }
  });
  </code></pre>