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仅包含数值。第9列基于由提供的JS函数生成的字符串值作为字符串排序。

如何指示数据表按原始'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。

中

JQuery数据表：按数据排序

2 个答案: