How to populate/present added datatables row with data?

Question

I am performing some ASP.NET gridview conversions using the datatables.net plug-in. The answer to why I am doing this is more involved and can be debated. However, I need some help with one of the issues I am running into.

Using Javascript to convert the gridview on the page was actually quite simple and works well. The major issue is that I want to have a fixed 'total' row (footer) within the body of the datatable so that it remains responsive just like the rest of the table.

I have attempted to add a footer using the code-behind, and I can populate that footer with total data, but it is not responsive with the rest of the table. I am assuming because the <tfoot> is outside of the <tbody> .

Using javascript, I have successfully added a new datatable row and I can output the data to the console, but I am unable to populate the added row with the object data.

Javascript:

var sum;
$(document).ready(function () {
var table = $('#cphPage_gvTaxColl').DataTable();

//convert string to int
var intVal = function (i) {
    var j = $("<span/>");
    var txt = j.html(i).text();

    //        alert('txt :' + txt);

    var myVal = typeof txt === 'string' ?
        parseFloat(txt.replace(/[^\d.-]/g, '')) :
        typeof txt === 'number' ?
            i : 0;
    return myVal || 0;
};

//format integer as currency
var formatSum = function (myVal) {
    return accounting.formatMoney(myVal, {
        symbol: "$",
        precision: 2,
        thousand: ",",
        decimal: ".",
        format: {
            pos: "%s %v",
            neg: "%s (%v)",
            zero: "%s  0.00"
        }
    });
};

//add total row and determine index
table.row.add(['GRAND TOTAL']).draw();
var total_row = (table.row().count() + 1);
var total_col = (table.row(total_row).column().count + 1);

//alert
console.log('total row: ' + total_row);

//loop columns
table.columns('.sum').every(function () {
    sum = this
        .data()
        .reduce(function (a, b) {
            console.log('adding ' + intVal(a) + ' and ' + intVal(b));
            return intVal(a) + intVal(b);
        });

    //alert
    console.log('sum: ' + sum);

    console.log('column row 2 val: ' + this.data().row([2]));

    $(this.cell.node( total_row )).html(
                formatSum(sum)
            );

});
});

How do I present the object data within the datarow?

I am also receiving the following error message, and I am not certain which parameter is missing ( the 2nd and 3rd columns are null ):

Error message

I have included a screenshot with the console data, and if you need it I can provide the .aspx markup:

Page + cosole log output

I'm still learning the ins-and-outs of this stuff. Any guidance you can provide is greatly appreciated.

Thanks in advance!

Answer 1

Here is my solution:

1. The html-table for datatables should have <tfoot>

Something like this:

<table id='table'>
    <tbody>
        <tr><td></td></tr>
    </tbody>
    <tfoot>
        <tr><td></td></tr>
    </tfoot>
</table>

2. Define footerCallback field

Datatables initialization:

$('#table').dataTable({
...
  "footerCallback": _footerDrawn
...
});

3. footerCallback :

I use server-side data, so my source of data for footer is just another field of of ajax-response :

_footerDrawn: function( row, data, start, end, display ) {
  var table = $('#table').dataTables();
  var json = table.api().ajax.json();
    // assign values to each cell of the footer from json.total array
    $.each( table.api().columns().indexes(), function( index ) {
      $( table.api().column( index ).footer() ).html( json.total[index] );
    });
  }
}

json.total contains array of string to print in footer row