通过 R DT::datatables 中的 JS 回调呈现 HTML答案

【问题标题】：Rendering HTML via JS callback within R DT::datatables通过 R DT::datatables 中的 JS 回调呈现 HTML
【发布时间】：2019-01-16 16:51:48
【问题描述】：

在此处 (https://github.com/rstudio/DT/issues/393#issuecomment-279627237) 处理 tomasreigl 的示例，我认为由于基本的 JS 问题，我有一个无法正常工作的细微变化。

创建数据

library(DT)
dataSet <- data.frame(name=c("Jack", "Jill"),
                  age=c(25,25),
                  tableHtml=c("<table><tr><th>Value A</th><th>Value B</th></tr><tr><td>1</td><td>2</td></tr></table>",
                              "<div><table><tr><th>Value A</th><th>Value B</th></tr><tr><td>3</td><td>4</td></tr></table></div>"),
                  stringsAsFactors=FALSE)'

方法一，在 DT 表中渲染 HTML 表 WORKING，但不是我需要的

现在，我想做的是为 DT 交互式表中的每一行呈现一个 html 表作为嵌套子级。第一个块有效，但显然会为每个 DT 行呈现相同的表，因为 HTML 是在回调中硬编码的：

## Working, but same child table for every row
DT::datatable(
    cbind(' ' = '&oplus;', dataSet),
    escape = -2,
    options = list(
        columnDefs = list(
            list(visible = FALSE, targets = c(0,4)),
            list(orderable = FALSE, className = 'details-control', targets = 1)
        )
    ),
    callback = JS("
                  table.column(1).nodes().to$().css({cursor: 'pointer'});
                  var format = function(d) {
                    return '<div><table><tr><th>Value A</th><th>Value B</th></tr><tr><td>1</td><td>2</td></tr></table></div>'
                  };
                  table.on('click', 'td.details-control', function() {
                    var td = $(this), row = table.row(td.closest('tr'));
                      if (row.child.isShown()) {
                        row.child.hide();
                        td.html('&oplus;');
                      } else {
                        row.child(format(row.data())).show();
                        td.html('&CircleMinus;');
                      }
                    });"
                  )
)

方法 2 为每一行渲染不同的 HTML 表格不起作用

进来的是数据框dataSet 的tableHtml 列。对于数据框dataSet 的每一行，我想使用数据框dataSet 的列tableHtml 中的HTML 来渲染一个DT 表行，该行包含一个包含表的子行。下面，我尝试只返回 d[4]，但这会返回原始 HTML 而不会呈现表格。

## Attempt at different child table for each row
datatable(
    cbind(' ' = '&oplus;', dataSet),
    escape = -2,
    options = list(
        columnDefs = list(
            list(visible = FALSE, targets = c(0,4)),
            list(orderable = FALSE, className = 'details-control', targets = 1)
        )
    ),
    callback = JS("
                  table.column(1).nodes().to$().css({cursor: 'pointer'});
                  var format = function(d) {
                    return d[4]
                  };
                  table.on('click', 'td.details-control', function() {
                    var td = $(this), row = table.row(td.closest('tr'));
                      if (row.child.isShown()) {
                        row.child.hide();
                        td.html('&oplus;');
                      } else {
                        row.child(format(row.data())).show();
                        td.html('&CircleMinus;');
                      }
                    });"
                  )
)

我尝试了大约 20 种变体，但没有一种能按预期工作。事实上，我对 thomasreigl 示例的第一次修改确实有效，这让我认为这只是一个超出我能力范围的 JS 小问题。任何帮助表示赞赏。

【问题讨论】：

标签： javascript html r dt

【解决方案1】：

好吧，再折腾 2 个小时，结果发现将 escape = -2 更改为 escape = FALSE 就可以了。

【讨论】：