从渲染返回节点的数据表在响应式中不起作用

Question

根据文档：https://datatables.net/reference/option/columns.render

columns.render

可以解析为四个特殊值：

（...）

node

(2.0) - 请求显示数据类型时，您可以返回要在表格单元格中显示的 DOM 节点。需要注意的是，所有其他数据类型都应返回字符串或数值，以便 DataTable 可以对它们进行操作（例如，搜索、顺序和类型检测需要 DOM 节点以外的数据！）。

所以我制作了一个自定义列渲染器，它返回

node

:

  render: function( data, type, row, meta ) {
    if (type === 'display') {
        console.log(data)
      //return `k1: <strong>${data.k1}</strong>, k2: <strong>${data.k2}</strong>`
      return $('<span>').append(
        'k1: ',
        $('<strong>').text(data.k1).css('color', 'red'),
        ", k2:",
        $('<strong>').text(data.k2).css('color', 'green')
      ).get(0)
    }
    return data
  }

https://jsfiddle.net/g0ph5qv8/3/

而且效果很好。当列被

responsive

隐藏时（例如，通过添加

none

类，或简单地调整窗口大小），就会出现问题：

https://jsfiddle.net/g0ph5qv8/4/

它无法渲染对象 - 仅显示其文本表示：

除了从渲染器返回实际的 html 之外，还有什么方法可以解决这个问题吗？ 所以

$(obj).html()

而不是

$(obj).get(0)

？

Answer 1

事实证明，它已在响应式 3.0 中修复，但需要使用非标准渲染器来实现

responsive.details

:

https://datatables.net/forums/discussion/comment/229630/#Comment_229630

所以这个：

- responsive: true,
+ responsive: {
+     details: {
+       renderer: DataTable.Responsive.renderer.listHiddenNodes()
+     }
+ },

对我有用