数据表呈现数字排序问题

Posted 2023-05-09

【中文标题】数据表呈现数字排序问题

【英文标题】：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。

【参考方案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 属性来提供我们需要的相关行索引。

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