DataTables API：由于渲染（在某些元素中插入字符串），数据表无法对整数列进行排序

Posted 2023-05-09

【中文标题】DataTables API：由于渲染（在某些元素中插入字符串），数据表无法对整数列进行排序

【英文标题】：DataTables API: Datatables can't sort a column of integers due to the render (which inserts a string in certain elements)

【发布时间】：2018-01-19 06:52:53

【问题描述】：

渲染函数似乎损害了 DataTable 对我的一列的排序能力。此列包含所谓的“语料库等级”。语料库排名都是整数，但出于界面目的，我编写了一个渲染函数来检测语料库排名何时超过 4000 的值。如果是这样，那么我让渲染函数将语料库排名条目更改为表示稀有的字符串。

这是因为当有人单击列的标题以尝试按语料库排名对其进行排序时，语料库排名被视为字符串而不是整数。如果我删除渲染功能那么该列实际上被排序为整数而不是字符串。

                     columns.push(
              "name": $(this).data("fieldname"),
              "data": "fields."+$(this).data("fieldname"),
              /*"render": function( data, type, full, meta) 
                  if (data > 4000) 
                    return "rare";
                   else 
                    return data;
                 
               ,*/
              "visible": $(this).data("visible"),

我知道 DataTables 通常使用其中的数据类型对列进行排序...但这是一个既有整数又有字符串的列。我该怎么做才能解决这个问题？

【参考方案1】：

您只需要显示字符串"rare"，而不是对其进行排序。查看type 参数，它为您提供了为不同目的返回不同值的机会：

render: function(data, type, full, meta) 
  if (type == 'display') 
    if (data > 4000) 
      return "rare"
    
  
  return data
,

现在"rare"只显示在表格中，但是当表格被排序或过滤时，将使用原始值。

【讨论】：

这行得通。这似乎是更快的修复方法之一，但我想知道“类型”到底是什么，以及我如何知道它等于“显示”的字符串值。我在查找文档时找不到这个，但已经有一段时间了，您可以给我任何线索吗？

@ByronSmith 好吧，“看...”是某种提示，您可以自己查看文档 :) 这里是 datatables.net/reference/option/columns.render 对于所有type 可能性datatables.net/manual/data/orthogonal-data

啊。让我哑口无言。我只是用谷歌搜索了它，但找不到信息。

【参考方案2】：

您可以添加另一列 isRare 吗？并为 4000 以下的所有等级保持 0 和 4000 以上的所有等级保持 1 ？除非您有其他限制不允许您拥有这样的列，否则应该这样做。

【参考方案3】：

您可以使用它对html5-data-attributes 和columns.createdCell 进行排序。

以下是示例代码。我根据您上面的代码创建了它：

"data": "fields."+$(this).data("fieldname"),
"render": function( data, type, full, meta) 
              if (data > 4000) 
                return "rare";
               else 
                return data;
              
           ,
"createdCell": function (td, cellData, rowData, row, col) 
                   $(td).attr('data-order', cellData);
               

【参考方案4】：

我过去使用的一个选项（但可能不是当前最喜欢的方法）是使用 ref 标签将单元格内容包装在一个跨度中，并添加一个自定义排序类型来比较 ref 值：

$.fn.dataTableExt.oSort['ref-numeric-asc'] = function (a, b) 
	var x = a ? a.match(/ref=['"]*(-?[0-9\.]+)/)[1] : "0";
	var y = b ? b.match(/ref=['"]*(-?[0-9\.]+)/)[1] : "0";
	x = parseFloat(x);
	y = parseFloat(y);
	return ((x < y) ? -1 : ((x > y) ? 1 : 0));
;
$.fn.dataTableExt.oSort['ref-numeric-desc'] = function (a, b) 
	var x = a ? a.match(/ref=['"]*(-?[0-9\.]+)/)[1] : "0";
	var y = b ? b.match(/ref=['"]*(-?[0-9\.]+)/)[1] : "0";
	x = parseFloat(x);
	y = parseFloat(y);
	return ((x < y) ? 1 : ((x > y) ? -1 : 0));
;

然后，您可以指定 'ref-numeric' 作为该列的排序类型。