Jquery Datatable Calculate Sum in footer while Searching :

Question

Fiddle: http://jsfiddle.net/6qLwkwud/43/

I want to add a total on filtered records while searching on a datatable.

Adding the initial total to the footer was quite easy but I am facing issues while recalculating sum in search.dt event.

From the logs I see this error :

TypeError: table.api is not a function

I think the this reference in initComplete works for me initially. Now How do I get this reference inside search.dt event ?

Note : I have gone through this Summing a filtered column in DataTables. but it does not solve my purpose as I am using classes to denote my columns where I want to apply. & in my table I don't know how many columns would have that attribute.

HTML :

<table id="example">
    <thead>
        <tr><th class="sum">a column</th>
        <th class="sum">b column</th></tr>
    </thead>
    <tbody>
        <tr><td >10</td> <td>15</td></tr>
        <tr><td>10</td> <td>18</td></tr>
        <tr><td>20</td> <td>20</td></tr>
        <tr><td>20</td> <td>25</td></tr>
        <tr><td>30</td> <td>28</td></tr>
        <tr><td>30</td> <td>30</td></tr>
    </tbody>
    <tfoot>
    <tr>
      <th>

      </th>
      <th class="Int">

      </th>
      </tr>
    </tfoot>
</table>

Script :

var table = $("#example").DataTable({
 "initComplete": function (settings, json) {
 var api = this.api();
 CalculateTableSummary(this);
}
});

$("#example").on('search.dt', function() {
    CalculateTableSummary(table);  
});



function CalculateTableSummary(table) {
    try {

        var intVal = function (i) {
            return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ?
                        i : 0;
        };

        var api = table.api();
        api.columns(".sum").eq(0).each(function (index) {
            var column = api.column(index);

            var sum = column
               .data()
               .reduce(function (a, b) {
                   //return parseInt(a, 10) + parseInt(b, 10);
                   return intVal(a) + intVal(b);
               }, 0);



            if ($(column.footer()).hasClass("Int")) {
                $(column.footer()).html('' + sum.toFixed(0));
            } else {
                $(column.footer()).html('' + sum.toFixed(2));
            }

        });
    } catch (e) {
        console.log('Error in CalculateTableSummary');
        console.log(e)
    }
}

Answer 1

Solved it by adding a footerCallbackFunction & passing {page:'current'} to the sum method.

http://jsfiddle.net/ubh6crqu/2/

var table = $("#example").DataTable({
 "initComplete": function (settings, json) {
 var api = this.api();
 CalculateTableSummary(this);
},
        "footerCallback": function ( row, data, start, end, display ) {

            var api = this.api(), data;  
     CalculateTableSummary(this);
     return ;       
            }
});



function CalculateTableSummary(table) {
    try {

        var intVal = function (i) {
            return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ?
                        i : 0;
        };

        var api = table.api();
        api.columns(".sum").eq(0).each(function (index) {
            var column = api.column(index,{page:'current'});

            var sum = column
               .data()
               .reduce(function (a, b) {
                   //return parseInt(a, 10) + parseInt(b, 10);
                   return intVal(a) + intVal(b);
               }, 0);


console.log(sum);

            if ($(column.footer()).hasClass("Int")) {
                $(column.footer()).html('' + sum.toFixed(0));
            } else {
                $(column.footer()).html('' + sum.toFixed(2));
            }

        });
    } catch (e) {
        console.log('Error in CalculateTableSummary');
        console.log(e)
    }
}

Answer 2

try this:

var table = $().Datatable({
  ...
  initComplete: function () {
    CalculateTableSummary(this.api());
  }
  ...
});

function CalculateTableSummary(api) {
  ...
  //var api = table.api();
  ...
}