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。