javascript - 数据表中的列排序问题

Question

我正在使用 dataTables Jquery 插件和 twitter bootstrap。我有我的 HTML 格式的 td 内容，当数据不在特定范围内时向它添加 popover。(具有 Popover 的橙色单元格)

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

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

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

普通的td cell包含如下代码

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

这里除日期之外的每个键都是一个设备。设备键包含以下信息的数组

   [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具有自定义呈现和完整排序。