JQuery 数据表：按数据排序答案

【问题标题】：JQuery Datatables: order by dataJQuery 数据表：按数据排序
【发布时间】：2017-04-30 20:05:19
【问题描述】：

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

我做了什么

我使用 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 列也只包含数值。第 9 列根据提供的 JS 函数生成的字符串值排序为字符串。

如何指示数据表按原始 'row[9]' 排序，但将自定义呈现的内容保留在单元格中？

【问题讨论】：

标签： javascript jquery datatables

【解决方案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
    } 
  }
}

【讨论】：

【解决方案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中。

【讨论】：