Calculate the highest value in a filtered column and use in mRender

Calculate the highest value in a filtered column and use in mRender

rolfsfrolfsf Posts: 27Questions: 6Answers: 0

I have a table with one column where I basically need to compare it's value to the other values in the column, and rank that value in quintiles based on the maximum value in the filtered column.

so, up to 20% of max value = 0.2, up to 40% of max value = 0.4, etc

Then, I add an icon based on that value, using a function like this:

(function( $ ){
   $.fn.valueStrength = function(oValue) {
        var wrappedValue;
        oValue = Number(oValue);
        
        if(oValue <= 0.2){
            wrappedValue = '<span class="icon-strength lte20" title="Value is Low">' + oValue + '</span>';
        }else if (oValue <= 0.4){
            wrappedValue = '<span class="icon-strength lte40" title="Value  is Medium-Low">' + oValue + '</span>';
        }else if (oValue <= 0.6){
            wrappedValue = '<span class="icon-strength lte60" title="Value  is Medium">' + oValue + '</span>';
        }else if (oValue <= 0.8){
            wrappedValue = '<span class="icon-strength lte80" title="Value  is Medium-High">' + oValue + '</span>';
        }else {
            wrappedValue = '<span class="icon-strength lte100" title="Value  is High">' + oValue + '</span>';
        }
        return wrappedValue;
   };
})( jQuery );

Once I have the quintiles, it's easy to do this within mRender (datatables v1.9)

However, I'm not sure how to calculate those quintiles for filtered data within mRender

I found this plugin: http://datatables.net/plug-ins/api/fnGetColumnData, but I suspect I can't call it from within mRender - I get an error that the table is null.

        
"mRender": function(data, type, full){
            if ( type === 'display' ) {
                var colData = myTable.fnGetColumnData( 2 );
                var maxValue = Array.max(colData);
                var value = data/maxValue;
                var wrappedValue = $().valueStrength(value);
                return wrappedValue;
            }else{
                return data;
            }
}

Any hints on how I can make this sort of calculation and render an icon on the fly?

Answers

  • rolfsfrolfsf Posts: 27Questions: 6Answers: 0

    So I've solved it by using fnRowCallback like so:

        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            setTimeout( function(){
                var display;
                var colData = myTable.fnGetColumnData(2);
                var maxValue = Array.max(colData);
                var relValue = aData[9]/maxValue;
                relValue = relValue.toFixed(2);
                display = $().valueStrength(relValue) + '<div>' + aData[9] + '</div>';
                
                $('td:eq(2)', nRow).html( display);
            }, 250); 
        }
    

    I found that I had to use setTimeout because if I didn't delay for a moment, I'd get a null object error.

    I'm not sure this is the most efficient method, though it works, so if you have suggestions, please post them!

This discussion has been closed.