dataTables中的列排序問題

Question

我使用dataTables Jquery插件以及twitter引導。我在HTML格式我的TD的內容（有酥料餅的橙色細胞）中的數據沒有特別的範圍內。當酥料餅添加到它

現在的問題是，當我有點柱溫它不是排序正確。請注意，我已經按照降序對AS2000進行了排序，但只有正常的細胞被排序。

我初始化的dataTable這樣

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

普通TD手機包含以下代碼

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

在橙色背景色的單元格中包含下面的代碼

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

任何幫幫我？

更新：

我從服務器

[{"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"}] 

這裏比日每個按鍵等這種反應是device.device鍵包含以下信息

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

數組

我正在用以下方式構建表格

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

有沒有更好的辦法？這樣我就可以排序而不會出現任何錯誤。

感謝， 大額牛

Answer 1

您應該使用mRender函數風格你的輸出。

它只會修改單元格的顯示，但會保留基礎數據不變，因此可用於排序和過濾。

"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 '-'; 
     } 
    }] 

我將返回的div的樣式留給您。

這是一個工作Plunker與自定義渲染和完整的排序。