datatables issues when the footercallback is called to do a sum for the columns

Problem with datatables Code:

        // SUM PLUGIN
        jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {
            return this.flatten().reduce( function ( a, b ) {
                if ( typeof a === 'string' ) {
                    a = a.replace(/[^0-9]/g, '') * 1;
                }
                if ( typeof b === 'string' ) {
                    b = b.replace(/[^0-9]/g, '') * 1;
                }
                return a + b;
            }, 0 );
        });

Here is my Jquery Call to datatables:

    var oTable = $("#example").DataTable({
      "bFilter": true,
      "pagingType": "full_numbers",
      "serverSide": true,
      "deferRender":true,
      "processing": true,
      "ajax": {
        "url" : "submit.html",
        "type" : "POST"
      },
      "footerCallback": function () {
          var api = this.api(),
              columns = 1, 2, 3];
          for (var i = 0; i < columns.length; i++) {
              $('tfoot th').eq(columns[i]).html(api.column(columns[i], {page:'current'}).data().sum());
              $('tfoot th').eq(columns[i]).append(api.column(columns[i], {page:'current'}).data().sum());
          }
      }
      });

the footer pagination is calculating wrong, the data i am showing is 200 records at first instance and then when i change the select to show 10 or 25, the sum of the rows at the bottom is always wrong, even at the first instance or when the pagination is changed or moved.

it never calculates the right data

it looks like this

HTML Code

https://jsfiddle.net/ga8sqky5/1/

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.