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

时间:2019-01-16 16:51:48

标签: javascript html r dt

我在这里以tomasreigl的示例(https://github.com/rstudio/DT/issues/393#issuecomment-279627237)为例,由于基本的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)'

方法1,在DT表中呈现HTML表工作,但不是我需要的

现在,我想做的是将html表格作为DT交互式表格中每一行的嵌套子级呈现。第一个块有效,但显然会为每个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表

输入数据框tableHtml的{​​{1}}列。对于数据帧dataSet的每一行,我想使用数据帧dataSet的列tableHtml中的HTML渲染DT表行,其中子行包含一个表。在下面,我尝试仅返回dataSet,但这将返回原始HTML,而不呈现表。

d[4]

我尝试了大约20种变体,但没有一种能按预期工作。我对thomasreigl的示例进行的第一次修改确实有效,这使我认为这只是我之外的一个小JS问题。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

嗯,又花了2个小时的摆弄,结果发现将escape = -2更改为escape = FALSE可以解决问题。