数据表呈现数字排序问题答案

【问题标题】：Datatables Render Numeric Sort Issue数据表呈现数字排序问题
【发布时间】：2020-11-17 21:02:36
【问题描述】：

我正在尝试使用以下代码，但它不会正确地对列进行排序。数据正确显示为整数，但是当我单击列标题时，它似乎是随机排序的。

{
  targets: 7,
  data: null,
  render: function(data, type, row, meta) {
    var value = Math.floor(Math.random() * Math.floor(100));
    if (type === "display") {
      return value;
    } else {
      return value;
    }

  }
},

【问题讨论】：

你可以用100代替Math.floor(100)
无论if 中的条件如何，您都会返回value。而value 始终是一个随机数。
@VLAZ 正确..但排序仍然不起作用。例如，我的值是 3,37,46,49，当我点击升序排序时，它显示为 46,49,3,37。

标签： javascript jquery sorting datatables

【解决方案1】：

这是由 DataTables 处理 orthogonal data 的方式以及您的 render 函数中的随机数生成器如何干扰该过程造成的。

问题

在我的测试示例中，我的表有 3 行数据。我使用了列索引 5，而不是 7。这是我的 DataTable：

$(document).ready(function() {

  $('#example').DataTable( {

    columnDefs: [
      { targets: 5,
        render: function(data, type, row, meta) {
          var x = Math.floor(Math.random() * 100);
          console.log(type + ' - ' + x);
          return x;
        }
      } 
    ]

  } );
} );

以下输出记录到控制台：

display - 97
display - 74
display - 39
type - 17
type - 19
type - 31
filter - 55
filter - 34
filter - 28

对于每一行数据，会生成 3 个不同的随机数 - 一个 display 值、一个 type 值和一个 filter 值。

第一次对该列进行排序时，会生成另一组随机数：

sort - 4
sort - 12
sort - 85

正是这些最终值被用于排序 - 当然，它们很可能是与原始显示值不同的排序顺序。

解决方案

一种解决方案是在数组中捕获原始显示值，然后在将使用 filter 或 sort 值时使用这些值：

$(document).ready(function() {

  var rands = [];

  $('#example').DataTable( {

    columnDefs: [
      { targets: 5,
        type: "num",
        render: function(data, type, row, meta) {
          var x = Math.floor(Math.random() * 100);
          if ( type === 'display' ) {
            rands.push(x);
            return x;
          } else {
            return rands[meta.row];
          }
        }
      } 
    ]

  } );
} );

在这里，我们在声明 DataTable 之前设置了一个数组 (rands)。然后我们用最初生成的显示值填充该数组。我们使用meta.row 属性来提供我们需要的相关行索引。

然后，当遇到任何其他类型的正交数据时，我们会从数组中替换原始显示值，以确保一致的排序（和过滤）。

【讨论】：