hide zero values

jackalbright

Hi,
I would like to be able to hide zero values in row data without actually removing the number zero from the cell. This is so that my column totals in the footer still work. I find that if I simply remove the zero from the cell, my footer calculations throw NaN error.

Is there a function that allows me to grab the background color of the cell so that I can use that as the font color, thus hiding the value?

allan

I think your best bet will probably be to use a renderer. You can have it check for both the display data type and a zero value. If both are turn then return an empty string. That way the underlying data isn't affected at all and can still be used for calculations (i.e. the column().data() etc methods will still work just fine).

Allan

kthorngren

I find that if I simply remove the zero from the cell, my footer calculations throw NaN error.

How are you doing this?

Here is a simplistic example based on the footercallback example example that show an empty cell if the value is 0. It uses orthogonal data to display an empty cell if the cell data is 0.
http://live.datatables.net/nucasizi/1/edit

Maybe either of these examples will help or maybe you can update my example to show the issue you are having so we can offer suggestions.

Kevin

jackalbright

Thanks Kevin and Allan,

Using a renderer on each column of data fixed my problem, like this:

render: function (data, type, row) {
if (type === 'display' && data === 0) {
return '';
}
return data;
}

jackalbright

following up on my most recent response, Kevin's solution worked in not displaying zero values. However, now tolocalestring doesn't do currency formatting.

When I simply do this, the currency displays properly:
render: $.fn.dataTable.render.number( ',', '.',0, '$' )

However, when I do this, the number simply displays as a non-formatted number:
"render": function (data, type, row) {
//console.log(data);
if (type === 'display' && data === 0) {
return '';
}else{
return data.toLocaleString("en-US",{style: 'currency',currency: 'USD'});
}
}

kthorngren

You can chain display( data ) to $.fn.dataTable.render.number( ',', '.',0, '$' ) and use it in columns.render. Updated example:
http://live.datatables.net/nucasizi/3/edit

Also the example shows that return data.toLocaleString("en-US",{style: 'currency',currency: 'USD'}); works. You can switch the comments for the return statements to see. If you want this debugged then please show an example of the problem.

Kevin

jackalbright

Thanks once again. That worked for me.

Question though. Why does this use of render yield a good result
{
"data": "january" ,
"width": "8%",
render: $.fn.dataTable.render.number( ',', '.',0, '$' )
},

While this one requires me to chain display(data) to the .number() function?
render: function (data, type, row) {
if (type === 'display' && data === 0) {
return '';
}
return $.fn.dataTable.render.number( ',', '.',0, '$' ).display(data);
}

kthorngren

render: $.fn.dataTable.render.number( ',', '.',0, '$' )

This replaces the columns.render function with the $.fn.dataTable.render.number( ',', '.',0, '$' ) function which receives the columns.render function paramters data, type and row. It will automatically use the data parameter.

return $.fn.dataTable.render.number( ',', '.',0, '$' ).display(data);

To use that renderer independently, whether its a return in columns.render or somewhere else, you need to pass in the data by chaining .display(data).

Kevin