Question

我以相当标准的方式使用DataTables插件。这是ready事件内容：

jQuery('#languages_table').DataTable({
    pageLength: 100,
    columns: [
      { orderDataType: "dom-text" },
      { orderDataType: "dom-text" },
      { orderDataType: "dom-text" },
      { orderDataType: "dom-text", type: "num" },
      { orderable: false },
      { orderable: false }
    ]
  });

但是，在某些情况下，单元格没有信息，因此我需要显示类似 no data 的内容。

这显然与分拣系统混淆（特别是对于数字列），在不需要的地方对它们进行排序。

我已经设法通过使单元格完全为空（因此根本没有写没有数据）并通过css添加该文本来摆脱数字问题：

#languages_table td:empty::before {
  content: "no data";
}

这样，单元格计为零，下行搜索，它们出现在最底层（因为以这种方式对数字进行排序更有用）。

这很糟糕（翻译很痛苦），但它确实很有用。

我现在需要对文本单元格相同，但在这种情况下，排序应该将空单元格放在升序搜索的底部（在这种情况下更有趣），我当然不知道如何那样做。

有没有办法手动处理这些边缘情况？

Answer 1

您需要自定义排序功能。您可以将其范围限定为您定义的自定义类型。

$.extend($.fn.dataTableExt.oSort, {
    "null-last-pre": function ( a ) {
        // Preprocess data if you need to.  Currently doing nothing
        return a;
    },

    "null-last-asc": function( a, b ) {
        return (a===null)-(b===null) || +(a>b)||-(a<b);
    },

    "null-last-desc": function(a,b) {
        return (a===null)-(b===null) || -(a>b)||+(a<b);
    }
});

然后将columnDefs添加到您的选项中：

columnDefs: [
   { type: 'null-last', targets: [0,1,2,3,4,5] }
 ]

同样从列定义中删除“type：'num'”，只要数据为“null”或“undefined”，它就应该正确排序。如果你需要'num'类型的类型转换，那么只需从targets数组中删除'3'。不确定哪种类型优先（columnDef或column）。

当“无数据”出现时，对行进行不同的排序

1 个答案: