Column sorting issue in dataTables

Question

I'm using dataTables Jquery plugin along with twitter bootstrap. I've my td content in HTML format to add popover to it when the data not in particular range.(Orange Color Cells having Popover)

Now the problem is when i sort the column Temperature it's not getting sorted properly.Note that i've sorted Temperature for AS2000 in descending order but only normal cells got sorted.

I've Initialized dataTable like this

$('#summaryTable').dataTable({
     "aoColumns":[null,null,{"sType": "num-html"},{"sType": "num-html"}]
});  

Normal td cell contains the following code

 <td name="temperature_celsius" class="normal sorting_1"><div><span>23.40</span></div> </td>

The cell in Orange background color contains the following code

 <td name="temperature_celsius" class="warning sorting_1"> <div> <span data-container="body" data-trigger="hover" data-toggle="popover" data-placement="bottom" data-title="<strong>Alert</strong>" data-html="true" data-content="<p class='text-danger'>Exceeds range limit 30.0 - 20.0 </p>" data-original-title="" title="">61.0</span><i class="icon icon-exclamation-sign pull-right" style="font-size: 21px;"></i></div></td>

Any Help?

Update :

I've this response from server

[{"AS1000":["5.1","0","false","false",null,null],"AS2000":["-","-","-","-","-","-"],"Date":"2014-03-02 08:07:00.0"},
{"AS1000":["5.0","0","false","false",null,null],"AS2000":["-","-","-","-","-","-"],"Date":"2014-03-02 17:58:00.0"},
{"AS1000":["5.0","0","false","false",null,null],"AS2000":["-","-","-","-","-","-"],"Date":"2014-03-30 14:59:00.0"},
{"AS1000":["-","-","-","-","-","-"],"AS2000":["27.0","0","true","false","30.0 - 20.0",null],"Date":"2014-03-30 06:03:00.0"},
{"AS1000":["-","-","-","-","-","-"],"AS2000":["15.0","0","false","false",null,null],"Date":"2014-03-02 02:00:00.0"},
{"AS1000":["5.0","0","false","false",null,null],"AS2000":["-","-","-","-","-","-"],"Date":"2014-03-14 20:06:00.0"},
{"AS1000":["5.0","0","false","false",null,null],"AS2000":["-","-","-","-","-","-"],"Date":"2014-03-30 07:00:00.0"},
{"AS1000":["5.0","0","false","false",null,null],"AS2000":["-","-","-","-","-","-"],"Date":"2014-03-05 06:58:00.0"},
{"AS1000":["5.0","0","false","false",null,null],"AS2000":["-","-","-","-","-","-"],"Date":"2014-03-24 13:01:00.0"},
{"AS1000":["-","-","-","-","-","-"],"AS2000":["23.40","0","true","false","30.0 - 20.0",null],"Date":"2014-03-25 23:56:00.0"},
{"AS1000":["-","-","-","-","-","-"],"AS2000":["23.5","0","true","false","30.0 - 20.0",null],"Date":"2014-03-02 09:03:00.0"},
{"AS1000":["-","-","-","-","-","-"],"AS2000":["61.0","0","false","false",null,null],"Date":"2014-03-17 19:07:59.0"}]

here each key other than date is a device.device key contains an array of following info

   [Temperature,Humidity,IsTemperatureRangeExceeds,IsHumidityRangeExceeds,TemperatureRangeLimit,HumidityRangeLimit]

I'm constructing table in the following way

    $.ajax({  
     type : "POST",   
     url : "http://localhost:8080/tablereports", 
     data: {svalue:JSON.stringify(options)} ,  
     success : function(result) { 

                    obj = JSON.parse(result);             
                    $("#reporttabletbodytempsum").empty();

                    var tablebody = $('#reporttabletbodytempsum');
                    $.each( obj, function( index, value ) { 


                            var convertedDate=value.Date;
                            $.each(value,function(index1,value1){
                               if(index1!="Date"){
//Measurement Type choosen already by the user.it may be Temperature or TemperatureHumidity

                                   if(measurementType =='Temp'){                                                       
                                       if(value1[2]=='true'){
                                           sreialloop +='<td name="temperature_celsius" class="warning"> <div> <span data-container="body" data-trigger="hover" '+
                                           'data-toggle="popover" data-placement="bottom" data-title="<strong>Alert</strong>" data-html="true" '+
                                           'data-content="<p class=\'text-danger\'>Exceeds range limit '+value1[4]+' </p>">'+value1[0]+
                                          '</span><i class="icon icon-exclamation-sign pull-right" style="font-size: 21px;"></i></div></td>';
                                       }                                                   
                                       else {
                                      sreialloop +='<td name="temperature_celsius" class="normal"><div><span>'+value1[0]+'</span></div></td>';
                                       }                                                       
                                   }else{                          
                                       if(value1[2]=='true'){
                                           sreialloop +='<td name="temperature_celsius" class="warning"> <div> <span data-container="body" data-trigger="hover" '+
                                           'data-toggle="popover" data-placement="bottom" data-title="<strong>Alert</strong>" data-html="true" '+
                                           'data-content="<p class=\'text-danger\'>Exceeds range limit '+value1[4]+' </p>">'+value1[0]+
                                          '</span><i class="icon icon-exclamation-sign pull-right" style="font-size: 21px;"></i></div></td><td>'+value1[1]+'</td>';
                                       }                                                       
                                       else if (value1[3]=="true"){
                                           sreialloop +='<td name="temperature_celsius">'+value1[0]+'</td><td  class="warning"> <div> <span data-container="body" data-trigger="hover" '+
                                           'data-toggle="popover" data-placement="bottom" data-title="<strong>Alert</strong>" data-html="true" '+
                                           'data-content="<p class=\'text-danger\'>Exceeds range limit '+value1[5]+' </p>">'+value1[1]+
                                          '</span><i class="icon icon-exclamation-sign pull-right" style="font-size: 21px;"></i></div></td>';
                                       }
                                        else{
                                      sreialloop +='<td name="temperature_celsius" class="normal"><div><span>'+value1[0]+'</span></div></td><td><div><span>'+value1[1]+'</span></div></td>';                                                    
                                       } 
                                    }               


                               }        
                            });            
            tablebody.append($('<tr class="reporttable"><td>'+ ++sno +'</td><td>'+convertedDate+'</td>'+sreialloop+'</tr>'));   



 });
$('[data-toggle="popover"]').popover({
    'placement': 'auto',
    trigger: 'hover'
});       

sumTable = $('#summaryTable').dataTable();              

     },   
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
         alert("Status: " + textStatus); alert("Error: " + errorThrown); 
     }      
    }) ;

Is there any better way? so that i can do sorting without any error.

Thanks, Mithun

Answer 1

You should use the mRender function to style your output.

It will just modify the display of the cell, but leaves the underlying data intact, so it can be used for sorting and filtering.

    "aoColumns": [null, null, {
      mRender: function(data, type, full) {
        if (data >= 5) {
          return '<div name="temperature_celsius" class="warning sorting_1">' + data + '</div>';
        }
        return '-';
      }
    }, {
      mRender: function(data, type, full) {
        if (data >= 20 && data <= 60) {
          return '<div name="temperature_celsius">' + data + '</div>';
        }
        if (data >= 60) {
          return '<div name="temperature_celsius" class="warning sorting_1">' + data + '</div>';
        }
        return '-';
      }
    }]

I leave the styling of the returned divs up to you.

Here is a working Plunker with custom rendering and full sorting.