How can we have multiple rows in the footer of a datatable

niks551

Hi,

I wanted to have two rows for a data table footer to show the sum/total of columnar fields.
THe first row displays the subtotals of each page and the second row displays the totals of all the fields.

I know how to get the totals.but my questions are
1.Does data table support multiple rows in footer.
2.I get a NAN while the page is first loaded then when i click the the table header columns i get the corresponding totals.
Can anyone let me know how to resolve this or cite an example.

My code is as follows
https://gist.github.com/niks551/6217915

Thanks,
Nikhil

niks551

Following is my console output

http://cl.ly/image/0z0m2c333j1t

allan

> 1.Does data table support multiple rows in footer.

Yes - just put the elements into the page. The one thing it doesn't do - and what is probably tripping you up is cache more than one row - to be honest, you might even be best just skipping the fact that DataTables fixed you the row in this case and just directly manipulate the DOM as if DataTables wasn't there - `$('#temp_data tfoot tr:eq(1)')` to get the second row for example.

The reason it doesn't cache more than one row is that it gets complex if you have colspan / rowspan attributes. Thinking about it, DataTables should probably be passing just the tfoot element into the callback, but its a bit late to change that now...

Allan

niks551

Thanks Allan,

But is there anything that I can do to avoid NAN while summing up the totals.
I have a conflict with sorting vs summing up the totals.
As you can see in my console if i print something like
for(){
alert(aaData[aiDisplay[i]][4]); or aaData[i][4]
i get the value as 456 //in the console
}

in my html i have something like


The only alternative that I was able to do was first sort the columns and then do the summation of totals. which is not desirable and want to change it.

allan

If you are getting NaN then its trying to sum non-numeric data. You need to remove the non-numeric data, probably using a regular expression, in this case it looks like you would want to remove the input element.

Allan

niks551

Yes I was able to do that using regexpressions.
It works when the first time page loads but now(after loading) I lose the sorting functionality as it again try's to evaluate the reg exp and fails as there is no .

Is it something that I can do in my external sorting functions
Hope you get my point.
Please let me know if you want me to share anything.

niks551

I have one of my external sorting functions as follows. and this is in document.ready()
and if i click on sorting of any of the columns as mentioned in my previous comment it's not able to parse the regexpression

//custom sorting function for percentage values. Requires a hidden input tag which stores the numeric value using which column is sorted
$.fn.dataTableExt.afnSortData['dom-percent'] = function(oSettings, iColumn) {var aData = [];$('td:eq(' + iColumn+ ') input',
oSettings.oApi._fnGetTrNodes(oSettings)).each(function() {aData.push(this.value);});
return aData;}