title: sum column value using datatable
body: <p>I want to sum <code>earning</code> column values to the total at end of code. I am using <code>Jquery datatable</code> to filter records by this code but unable to write code for the total.I've also <code>tried footer callback of datatable</code> but doesn't get desired result.</p>
  
  <pre><code>        &lt;script src="media/js/jquery-1.4.4.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="media/js/jquery.dataTables.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"&gt;&lt;/script&gt;
          &lt;script src="media/js/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="media/js/jquery.dataTables.columnFilter.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
                  $.datepicker.regional[""].dateFormat = 'dd/mm/yy';
                  $.datepicker.setDefaults($.datepicker.regional['']);
       $('#example').dataTable({
  "aoColumns": [{},
                  ]
                  } )
              .columnFilter({ sPlaceHolder: "head:before",
              aoColumns: [ { type: "hidden" },
                          { type: "hidden" },
                          { type: "hidden" },
                          { type: "hidden" },
                          { type: "hidden" },
                          { type: "hidden" },
                          { type: "hidden" },
                          { type: "hidden" },
                          { type: "hidden" },
                          { type: "date-range", sRangeFormat: "From Date{from} To Date {to}" },
                          { type: "hidden" },
                          { type: "hidden" },
                          { type: "hidden" }
                  ],
  "fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
                          /*
                           * Calculate the total market share for all browsers in this table (ie inc. outside
                           * the pagination)
                           */
                          var iTotalMarket = 0;
                          for ( var i=0 ; i&lt;aaData.length ; i++ )
                          {
                              iTotalMarket += aaData[i][11]*1;
                          }
  
                          /* Calculate the market share for browsers on this page */
                          var iPageMarket = 0;
                          for ( var i=iStart ; i&lt;iEnd ; i++ )
                          {
                              iPageMarket += aaData[ aiDisplay[i] ][11]*1;
                          }
  
                          /* Modify the footer row to match what we want */
                          var nCells = nRow.getElementsByTagName('th');
                          nCells[1].innerHTML = parseInt(iPageMarket * 100)/100 +
                              '% ('+ parseInt(iTotalMarket * 100)/100 +'% total)';
                      }
  
          });
  });
  
          &lt;/script&gt;
      &lt;/head&gt;
  
  
  
  
  &lt;body id="dt_example"&gt;
  
  &lt;div id="demo"&gt;
   &lt;table id="example" class="display"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                            &lt;th&gt;Agent Code&lt;/th&gt;
                              &lt;th&gt;Agent Name&lt;/th&gt;
                              &lt;th&gt;Designation&lt;/th&gt;
                              &lt;th&gt;Account No.&lt;/th&gt;
                              &lt;th&gt;Customer Name&lt;/th&gt;
                              &lt;th&gt;Plan No.&lt;/th&gt;
                              &lt;th&gt;Invoice&lt;/th&gt;
                              &lt;th&gt;Bill Amt.&lt;/th&gt;
                              &lt;th&gt;Bill Date&lt;/th&gt;
                              &lt;th&gt;Pay Date&lt;/th&gt;
                              &lt;th&gt;Insta. No.&lt;/th&gt;
                              &lt;th&gt;Earning&lt;/th&gt;
                              &lt;th&gt;Remark&lt;/th&gt;                          &lt;/tr&gt;                        
  &lt;tr&gt;
                              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
  &lt;/tr&gt;
                      &lt;/thead&gt;
  
                      &lt;tbody&gt; 
                          &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
  
  
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
                      &lt;/tbody&gt;
                          &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;th style="text-align:right" colspan="11"&gt;Total:&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>