Javascript 数据表中的列排序问题

我正在使用dataTables Jquery插件和twitter引导。当数据不在特定范围内时，我会将我的td内容以HTML格式添加到其中。（带有popover的橙色单元格）

现在的问题是，当我对列温度进行排序时，它没有得到正确的排序。请注意，我对AS2000的温度进行了降序排序，但只对普通单元格进行了排序

我已经像这样初始化了数据表

$('#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>

此处，除日期外的每个键都是一个设备。设备键包含以下信息的数组

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

$.ajax（{
类型：“POST”，
url:“http://localhost:8080/tablereports", 
数据：{svalue:JSON.stringify（选项）}，
成功：函数（结果）{
obj=JSON.parse（结果）；
$（“#ReportTableToByTempSum”）.empty（）；
var tablebody=$（“#reporttabletbodytempsum”）；
$.each（对象，函数（索引，值）{
var convertedDate=value.Date；
$.each（值，函数（index1，value1）{
如果（index1！=“日期”）{
//用户已选择测量类型。它可能是温度或温度湿度
如果（measurementType=='Temp'）{
如果（值1[2]=“真”）{
SREALLOOP+=''+值1[0]+
'';
}                                                   
否则{
SREALLOOP+=''+值1[0]+''；
}                                                       
}否则{
如果（值1[2]=“真”）{
SREALLOOP+=''+值1[0]+
''+值1[1]+''；
}                                                       
否则如果（值1[3]=“真”）{
SREALLOOP+=''+value1[0]+''+value1[1]+
'';
}
否则{
SREALLOOP+=''+value1[0]+''+value1[1]+''；
} 
}               
}        
});            
tablebody.append（$（''+++sno++''+convertedDate++''+sreialloop++'）；
});
$（'[data toggle=“popover”]'）。popover({
“放置”：“自动”，
触发器：“悬停”
});       
sumTable=$（“#summaryTable”）.dataTable（）；
},   
错误：函数（XMLHttpRequest、textStatus、ErrorSprown）{
警报（“状态：+textStatus”）；警报（“错误：+ERRORSHORN”）；
}      
}) ;

还有更好的办法吗？这样我就可以毫无差错地进行排序

谢谢，

---

Mithun

您应该使用

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

“aoColumns”：[null，null{
mRender：功能（数据、类型、完整）{
如果（数据>=5）{
返回“”+数据+“”；
}
返回“-”；
}
}, {
mRender：功能（数据、类型、完整）{
如果（数据>=20&&data=60）{
返回“”+数据+“”；
}
返回“-”；
}
}]

我把返回的div的样式留给你

---

这是一个使用自定义呈现和完整排序的示例。

感谢您的回答。。我不是直接从服务器响应构造表。因此，更新了问题供您参考。不，忽略更新。如果两个临时值都已过期，则排序不正确。

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

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