Change row color on sorting

Change row color on sorting

infiniteamitinfiniteamit Posts: 2Questions: 1Answers: 0
edited May 2016 in Free community support

Hi,

I've been using this forum to get insights on using the dataTables and until now have been satisfied since most of my queries have already been answered in some form or the other. But now, I am asking this question since I couldn't find anything related in the forum here.

I am using dataTables 1.10 and have a table with four columns. The table shows the names and compliance figures for those names. The compliance figures are "compliancePast24Hours", "compliancePastWeek" & "compliancePastMonth" containing numeric values typically ranging from between 0 and 100.

I need to be able to apply custom coloring on the rows of the table based on the column that is used for sorting. So when I sort on the "compliancePast24Hours" column, not only the table need to be sorted but the row color need to be "red" for values between 0 and 60, "yellow" for values above 60 and up to 80 or "green" if above 80. If I choose to sort using some other column the row colors need to be updated as per the above logic.

I looked at the "order" event but that gets fired after the data has been sorted. I am not able to figure this out on my own. Any help/pointers regarding this will be highly appreciated.

Thanks,
Amit

Answers

  • infiniteamitinfiniteamit Posts: 2Questions: 1Answers: 0

    Hi,

    I think I gave up too soon probably. This forum is so rich that most of the answers are already out there and its just a matter of digging deep enough. I finally solved it looking at various other solutions out there. Here is the code

    $('#resultsTable').on( 'order.dt', function () {
            tableOrder = dataTable.order();
            dataTable.rows( '.danger' ).nodes().to$().removeClass( 'danger' );
            dataTable.rows( '.warning' ).nodes().to$().removeClass( 'warning' );
            dataTable.rows( '.success' ).nodes().to$().removeClass( 'success' );
            dataTable.rows().every(function ( rowIdx, tableLoop, rowLoop ) {
                var value = "";
                var data = this.data();
                if (tableOrder[0][0] == "1")
                    value = data.past24HoursCompliance;
                else if (tableOrder[0][0] == "2")
                    value = data.pastWeekCompliance;
                else
                    value = data.pastMonthCompliance;
                var rowClass = "";
                if (value <= parseFloat(redThreshold)) 
                    rowClass = "danger";
                else if (value > parseFloat(redThreshold) && value <= parseFloat(yellowThreshold) ) 
                    rowClass = "warning";
                else 
                    rowClass = "success";
                this.nodes().to$().addClass(rowClass);
            });
        } );
    
This discussion has been closed.