hide zero values

hide zero values

jackalbrightjackalbright Posts: 14Questions: 4Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,597Questions: 1Answers: 10,485 Site admin

    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

  • kthorngrenkthorngren Posts: 21,388Questions: 26Answers: 4,961

    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

  • jackalbrightjackalbright Posts: 14Questions: 4Answers: 0

    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;
    }

  • jackalbrightjackalbright Posts: 14Questions: 4Answers: 0

    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'});
    }
    }

  • kthorngrenkthorngren Posts: 21,388Questions: 26Answers: 4,961

    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

  • jackalbrightjackalbright Posts: 14Questions: 4Answers: 0

    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);
    }

  • kthorngrenkthorngren Posts: 21,388Questions: 26Answers: 4,961
    edited January 2023 Answer ✓

    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

Sign In or Register to comment.