JQuery Datatables：按数据排序

Question

如何通过传递给数据的值而不是自定义呈现的内容对列进行排序？

我做了什么

使用jQuery数据表中显示的数据。从服务器到客户端，我只传递数字数据。在客户端，我使用自定义渲染函数创建表格内容：

{ 
    "targets": [9], 
    "visible": true, 
    "searchable": true, 
    "render": function(data, type, row) { 

     if (row[9] == -2) { 
      return ''; 
     } 
     if (row[9] == -1) { 
      return '<img width="20px" src="/~home/www/images/loader.gif" />'; 
     } 
     var result = row[9]; 
     if (row[10] > 0) { 
      result += '<strong><span class="text-success">'; 
      result += '(+' + row[10] + ')'; 
      result += '</span></strong>'; 
     } 
     if (row[10] < 0) { 
      result += '<strong><span class="text-danger">'; 
      result += '(' + row[10] + ')'; 
      result += '</span></strong>'; 
     } 
     return result; 
    }, 
}, 
{ 
    "targets": [10, 11], 
    "visible": false, 
    "searchable": false, 
}, 

即使通过列9,10和11仅包含数字值。根据所提供的JS函数生成的字符串值将第9列作为字符串排序。

如何通过原始'row [9]'指示数据表的顺序，但是保留单元格中的自定义渲染内容？

Answer 1

"render": function(data, type, row) { 
         ^^^^ 

的type目的是为了能够为不同的动作返回不同的值。默认type可以是'filter','display'或'sort'。在所有情况下，您都会返回列中显示的，因此您会根据呈现的内容获取Alpha排序，而不是基于数据值的数字排序。返回不同的标记串仅当请求类型为'display'，否则返回原data：

{ 
    "targets": [9], 
    "visible": true, 
    "searchable": true, 
    "render": function(data, type, row) { 
    if (type == 'display') { 
     if (row[9] == -2) { 
     return ''; 
     } 
     if (row[9] == -1) { 
     return '<img width="20px" src="/~home/www/images/loader.gif" />'; 
     } 
     var result = row[9]; 
     if (row[10] > 0) { 
     result += '<strong><span class="text-success">'; 
     result += '(+' + row[10] + ')'; 
     result += '</span></strong>'; 
     } 
     if (row[10] < 0) { 
     result += '<strong><span class="text-danger">'; 
     result += '(' + row[10] + ')'; 
     result += '</span></strong>'; 
     } 
     return result; 
    } else { 
     return data 
    } 
    } 
} 

Answer 2

可以在看不见的标签包装的原始数据并追加到输出，这样的：

if (row[9] == -2) { 
     return '<span style="display:none"></span>'; 
    } 
    if (row[9] == -1) { 
     return '<span style="display:none">'+ row[9] +'</span><img width="20px" src="/~home/www/images/loader.gif" />'; 
    } 
    var result = '<span style="display:none">'+ row[9] +'</span>' + row[9]; 

所以行会为了通过数据，隐藏在span。