Rendering HTML via JS callback within R DT::datatables

Question

Working off of tomasreigl's example here ( https://github.com/rstudio/DT/issues/393#issuecomment-279627237 ), I have a slight variation that is not working, I think due to basic JS issue.

Create Data

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)'

Approach 1, Render an HTML Table in the DT Table WORKING, But Not What I Need

Now, what I would like to do is render an html table as a nested child for each row in the DT interactive table. This first chunk works, but obviously will render the same table for each DT row, as the HTML is hard coded in the callback:

## Working, but same child table for every row
DT::datatable(
    cbind(' ' = '⊕', 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;');
                      }
                    });"
                  )
)

Approach 2 Render Different HTML Tables for each row NOT WORKING

In comes the tableHtml column of the data frame dataSet . For each row of data frame dataSet I would like to render a DT table row with a child row containing a table using the HTML in column tableHtml of data frame dataSet . Below, I try just returning d[4] , but that returns the raw HTML without rendering the table.

## Attempt at different child table for each row
datatable(
    cbind(' ' = '⊕', 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('⊕');
                      } else {
                        row.child(format(row.data())).show();
                        td.html('⊖');
                      }
                    });"
                  )
)

I've tried about 20 variations but none of them work as expected. The fact that my first modification of thomasreigl's example does work, makes me think it is just a minor JS issue that is beyond me. Any help appreciated.

Answer 1

好吧，又花了2个小时摆弄，结果将escape = -2更改为escape = FALSE可以解决问题。