DT::datatable 在解析单元格中的 HTML 元素时失败。

Question

我有一个 data.frame 当一列基本上是 HTML 元素。然而 DT 在浏览器中显示表格时，未能解析这些HTML元素。以下是我的代码

library(dplyr) # for the mutate call

    render <- JS(
      "function(data, type, row, meta){",
      "  if(type === 'sort' || type === 'type'){",
      "    return row[2];",
      "  } else if(type === 'display'){",

      "    return data;",
      "  } else {",
      "    return data;",
      "  }",
      "}"
    )

    d = data.frame(
      names = rownames(mtcars),
      date = as.Date('2015-03-23') + 1:32,
      time = as.POSIXct('2015-03-23 12:00:00', tz = 'UTC') + (1:32) * 5000,
      otherColumn = stringi::stri_rand_strings(32, 3),
      stringsAsFactors = FALSE
    ) %>%
    mutate('ss1' = "'<div style = 'height: 30px; width: 30px; border-radius: 50%; border: 1px solid rgb(255, 173, 31); display: flex; flex-direction: row; text-align: center; align-items: center; justify-content: center; font-size: 16px; color: #444444;'>9<span style = 'margin-top: 8px; font-size: 11px; color: #696969;'>M</span></div>'")

    datatable(d, filter = 'bottom', 
              options = list(
                pageLength = 5,
                columnDefs = list(
                  list(targets = 5, render = render)
                )
              )
    )

正如你所看到的，该列 ss1 没有解析 HTML 元素都没有。谁能给我指点一下，为什么会失败？

任何指针将是高度感激。

Answer 1

要解析 HTML 内 DT 我们需要 escape = FALSE. 从 ?DT::datatable:

escape 是否转义表中的HTML实体。TRUE表示转义整个表格，FALSE表示不转义；或者，你可以指定数字列索引或列名来表示要转义的列，例如1:5(前5列)，c(1，3，4)，或c(-1，-3)(除第1列和第3列外的所有列)，或c('Species'，'Sepal.Length')；由于行名取第一列来显示，所以在使用rownames时，应将数字列索引加一

所以你的代码就变成了。

datatable(d, filter = 'bottom', escape = FALSE,
          options = list(
            pageLength = 5,
            columnDefs = list(
              list(targets = 5, render = render)
            )
          )
)

为了制作这个表格

或者，我们可以用 DT::formatStyle() 风格的特定列。在 formatStyle，我们可以用camelCase来调用CSS元素(例如......)或使用backticks(例如...... "background-color")。backgroundColor = "red")或使用背标(例如，``background-color')。= "red". 例如：

library(dplyr)

render <- JS(
  "function(data, type, row, meta){",
  "  if(type === 'sort' || type === 'type'){",
  "    return row[2];",
  "  } else if(type === 'display'){",

  "    return data;",
  "  } else {",
  "    return data;",
  "  }",
  "}"
)

d = data.frame(
  names = rownames(mtcars),
  date = as.Date('2015-03-23') + 1:32,
  time = as.POSIXct('2015-03-23 12:00:00', tz = 'UTC') + (1:32) * 5000,
  otherColumn = stringi::stri_rand_strings(32, 3),
  stringsAsFactors = FALSE
) %>%
  mutate('ss1' = "M")

datatable(d, filter = 'bottom', 
          options = list(
            pageLength = 5,
            columnDefs = list(
              list(targets = 5, render = render)
            )
          )
) %>% formatStyle(columns = "ss1", 
                  height = "30px", 
                  width = "30px",
                  `border-radius` = "50%", 
                  border = "1px solid rgb(255, 173, 31)")