[英]Column sorting issue in dataTables
我正在使用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);
}
}) ;
有什么更好的办法吗? 这样我就可以进行排序而没有任何错误。
谢谢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 '-';
}
}]
我将返回的div的样式留给您。
这是一个具有自定义渲染和完整排序功能的Plunker 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.