Get max value of column with mRender

rolfsf

For each cell in one of the table's columns, I need to compare the value to the maximum value in the column, and add a style based on that. The table is being built from some JSON data.

I'm using mRender to handle the styling, but I can figure out how to get the max value of the column. I was using the following:

[code]
'mRender': function ( data, type, full ) {
if ( type === 'display' ) {
var maxV = Array.max(full[1])*1.05;
return makeBar(data, maxV);
}else{
return data;
}
}

[/code]

Array.max is expecting an array of data for the column:
[code]

Array.max = function( array ){
return Math.max.apply( Math, array );
};

[/code]

but I realize that 'full' only grabs the data for a single row.

How do I get an array of data for a single column?

Thanks!

allan

mRender only has access to the data for the row in question - so you'd need to calculate the maximum before mRender is run. How are you loading the data - is it from the DOM or Ajax?

Allan

rolfsf

Thanks for the reply, Allan! I guess it makes sense that mRender only has access to the row.

the data is loading via Ajax - here's the full init

[code]

function initTable(){
oTable = $('#portfolio-table').dataTable({
"bDestroy": true,
"bProcessing": true,
"sAjaxSource": '/data/portfolio.json',
"sAjaxDataProp": portfolioView,
'aaSorting': [[ 0, 'asc' ]],
'sScrollY': '300px',
'bPaginate': false,
'bScrollCollapse': true,
'aoColumnDefs': [
{ 'aTargets': [ 1 ],
'sClass': 'bar-cell',
'mRender': function ( data, type, full ) {
if ( type === 'display' ) {
var maxV = Array.max(full[1])*1.05;
return makeBar(data, maxV);
}else{
return data;
}
}
},
{ 'aTargets': [ 2,3 ],
'sClass': 'num'
},
{ 'aTargets': [ 4 ],
'sClass': 'interest',
'mRender': function ( data, type, full ) {
if ( type === 'display' ) {
var wrappedValue = $().calcInterest(full[4]);
return wrappedValue;
}else{
return data;
}
}
}
]
});
return oTable;
}

[/code]

and the data looks something like this:

[code]
{
"Product" : [
[ "Product A", 2800000, 7, 20, 0.57 ],
[ "Product B", 2500000, 9, 16, 0.17 ],
[ "Product C", 3200000, 3, 3, 0.27 ],
[ "Product D", 900000, 4, 6, 0.88 ],
[ "Product E", 4000000, 16, 18, 0.75 ],
[ "Product F", 1900000, 8, 8, 0.12 ],
[ "Product G", 6500000, 17, 17, 0.91 ],
[ "Product H", 2100000, 5, 8, 0.68 ]
],
"Industry" : [
[ "Industry A", 2800000, 7, 20, 0.57 ],
[ "Industry B", 2500000, 9, 16, 0.17 ],
[ "Industry C", 3200000, 3, 3, 0.27 ],
[ "Industry D", 900000, 4, 6, 0.88 ],
[ "Industry E", 4000000, 16, 18, 0.75 ],
[ "Industry F", 1900000, 8, 8, 0.12 ],
[ "Industry G", 6500000, 17, 17, 0.91 ],
[ "Industry H", 2100000, 5, 8, 0.68 ]
]
}
[/code]

The 'portfolioView' variable corresponds to "Product", "Industry", etc. in the JSON - the view (and data) can be switched by clicking a button

I appreciate your suggestions!

allan

So in DataTables 1.9 there are two options:

1. Define your own fnServerData function which will make the Ajax call to get the information from the server, and then before calling the DataTables callback for the data, calculate the total into a variable which is scoped so mRender can access it (i.e. just local to the function).

2. Use the `xhr` event to do the same thing. Using the `xhr` event might be slightly easier since you don't need to define your own Ajax call.

Allan

rolfsf

Thanks Allan. What I ended up doing is making a JSON call with jQuery, building an array for the column i'm interested in, running the Array.max function on that and saving the result as a variable, and then passing the original JSON data to the dataTable init. If I have time, I'll explore your suggestions as improvements.