Question

我正在尝试对称为优先级的列进行排序。该列有5个可能的值：高，中，低，未优先级和不适用。我希望能够按该顺序（升序）或反向（降序）对其进行排序。我的方法是根据我发现的here创建自定义排序功能。这就是我所做的：

option["columnDefs"] = [
  {
    "render":function(data,type,row) {
      var $select;
      switch(data) {
       case: "High":
         $select = $('<div class="my-class-high" priority="high">High</div');
         break;
       case: "Medium":
         $select = $('<div class="my-class-medium" priority="medium">Medium</div');
         break;  
       // etc. for other values. 
      }
      return $select.prop("outerHTML");
     },
     "targets" : 7,
     "sType" : "priority" 
   }
];

function getRank(cellHtml) {
  switch ($(cellHtml).attr("priority")) {
  case "high":
    return 0;
  case "medium":
    return 1;
  case "low":
    return 2;
  case "unprioritized":
    return 3;
  case "notapplicable":
    return 4;
  default:
    throw "Unrecognized priority.";
  }
}

jQuery.fn.dataTableExt.oSort["priority-desc"] = function (x, y) {
  return getRank(x) < getRank(y);
};

jQuery.fn.dataTableExt.oSort["priority-asc"] = function (x, y) {
  return getRank(x) > getRank(y);
};

//further down...
   $(#mytable).DataTable(option);

所有代码，包括排序功能，都按预期被命中。当我单击“优先级”列时，字形翻转。我的问题是，显示的排序顺序永远不会改变：它保持升序，并正确显示在表顶部，并且具有高优先级。

我创建了一个临时事件处理函数来检查：

$(tableLookup).on('order.dt',function() {
   var order = table.order();
});

这样，即使显示的顺序没有更新，我每次单击列标题也可以进一步验证排序顺序是否正在更改（至少在内部）。

我正在运行1.1.0.4版的jquery.dataTables.js。

我也尝试使用数据排序属性，如Anjani的答案here中所建议。这根本对排序顺序没有影响-表格仍会使用显示的文本按字母顺序对列进行排序。

有什么想法会导致我看到这些问题以及如何使排序工作正常吗？

Answer 1

这似乎可行：

var example = $('#example').DataTable({
  columns: [
    null, 
    null, 
    {
      sType : "priority",
      render: function(data,type,row) {
        var retVal = $("<div/>");
        switch(data) {
          case "High":
            retVal = retVal
              .addClass("my-class-"+data.toLowerCase())
              .attr("data-priority", data.toLowerCase())
              .text(data);
            break;
          case "Medium":
            retVal = retVal
              .addClass("my-class-"+data.toLowerCase())
              .attr("data-priority", data.toLowerCase())
              .text(data)
            break;  
          case "Low":
            retVal = retVal
              .addClass("my-class-"+data.toLowerCase())
              .attr("data-priority", data.toLowerCase())
              .text(data)
            break;  
          case "Unprioritized":
            retVal = retVal
              .addClass("my-class-"+data.toLowerCase())
              .attr("data-priority", data.toLowerCase())
              .text(data)
            break;  
          case "N/A":
            retVal = retVal
              .addClass("my-class-notapplicable")
              .attr("data-priority", "notapplicable")
              .text(data)
            break;
        }
        return retVal.prop("outerHTML");
      }
    }
  ]
});
function getRank(data) {
  switch (data) {
    case "high":
      return 0;
    case "medium":
      return 1;
    case "low":
      return 2;
    case "unprioritized":
      return 3;
    case "notapplicable":
      return 4;
    default:
      throw "Unrecognized priority.";
  }
}
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
  "priority-pre": function ( a ) {
    return getRank($(a).data("priority"));
  },
  "priority-asc": function( a, b ) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  },
  "priority-desc": function(a,b) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
  }
});

您的render case函数很烦人，所以我不确定您是否实际上在调用order函数，这始终是检查控制台内容的好主意。

我敢说可以对order函数进行整理，但我不确定为什么我和我一样不喜欢switch语句，但是我确实非常喜欢。 YMMV虽然。希望对您有所帮助，可以使用JSFiddle here。

Answer 2

您可以使用render函数执行此操作。 render函数的第二个参数是DataTables要求的数据版本。当它是sort时，它会询问应该用于排序的值。这样，您就不需要自定义排序方法。

var example = $('#example').DataTable({
  columns: [
    null, 
    null, 
    {
      render: function(data,type,row) {
        if(type == 'sort'){
            return getRank(data.toLowerCase());
        }
        switch(data) {
        case "N/A":
            return '<div class="my-class-notapplicable">' + data + '</div>';
        default:
            return '<div class="my-class-' + data.toLowerCase() + '">' + data + '</div>';
        }
      }
    }
  ]
});
function getRank(data) {
  switch (data) {
    case "high":
      return 0;
    case "medium":
      return 1;
    case "low":
      return 2;
    case "unprioritized":
      return 3;
    case "n/a":
      return 4;
    default:
      throw "Unrecognized priority.";
  }
}

https://datatables.net/reference/option/columns.render

DataTable自定义排序功能有效，但不会更新表显示

2 个答案: