How to display total of a column in the last row of a datatable generated using jQuery?
<p>I have created a datatable using jQuery. The table has five columns ,among one column is for payment amount. I have to display the sum of all values in the payment column at the bottom of payment amount column. How can I do that?</p>

<p>Below is my HTML code:</p>

<pre><code>&lt;table id="statement-table" cellpadding="0" cellspacing="0" border="0" class="wide100"&gt;
                  &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th class="black white-active-bg pad-bottom-0-5 cursor-auto"&gt;
                            &lt;input type="checkbox" id="select-all-statement" value="" /&gt;
                            &lt;/th&gt;
                            &lt;th id="stmt-column" class="black white-active-bg pad-bottom-0-5 cursor-auto"&gt;Statement&lt;/th&gt;
                            &lt;th id="dueDate-column"class="black white-active-bg pad-bottom-0-5 cursor-auto"&gt;Due Date&lt;/th&gt;
                            &lt;th id="totalDue-column" class="black white-active-bg pad-bottom-0-5 cursor-auto"&gt;Total Due&lt;/th&gt;
                            &lt;th id="payment-column" class="black white-active-bg pad-bottom-0-5 cursor-auto"&gt;Payment Amount&lt;/th&gt;
                        &lt;/tr&gt;
                        &lt;/thead&gt;
               &lt;/table&gt;
</code></pre>

<p>Below is my jquery code:</p>

<pre><code> $('#statement-table').dataTable({
         "data": json,
         "dom": 't',
         "info": false,
         "pageLength": 8,
         "columns": [
             {"data":""},
             {"data": "statementCode"},
             {"data": "dueDate"},
             {"data": "statementBalance"},
             {"data": "statementBalance"}

         ],
         "columnDefs": [
             {className: "pad-md-left-p-10 pad-top-bottom-p-10 white-active-bg mouse-link", "targets": [0,1,2,3,4]},
             {
                 'targets':   0,
                 'orderable': false,
                  'render': function(data, type, full, meta) {
                      ++index;
                          return '&lt;input type="checkbox" id="select-checkbox'+index+'" name="payment-checkbox" class="multi-checkbox"/&gt;&lt;label for="select-checkbox"&gt;&lt;/label&gt;';
                  }
             },
             {
                'targets': 1,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html('&lt;span id="pdf" class="stmt-identifier"&gt;'+sData+'&lt;/span&gt;');
                }
             },
             {
                'targets': 2,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                $(nTd).text(date);
                }
             },
             {
                 'targets': 3,
                 'render': function (data, type, full, meta){
                     return '$'+ data;
                 }
              },
              {
                 'targets': 4,
                 'searchable':false,
                 'orderable':false,
                 'render': function (data, type, full, meta){
                     return '&lt;span class="dollar-font"&gt;$&lt;/span&gt;'+
                     '&lt;input type="number" id="payement-textbox'+index+'" name="payment-textbox" min="0" max="100000" step="any" maxlength="9" class="payment" placeholder="--" value=""/&gt;';
                 }
              }

         ],
         "aaSorting": [[2, 'desc']],

     }); //End of datatable function 
</code></pre>

<p>So, I need to print sum of all values of  "payment-column" in the bottom of "payment column". Something like this:</p>

<p><a href="https://i.stack.imgur.com/5u6if.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5u6if.png" alt="enter image description here"></a></p>

<p>Please help?</p>