DT::datatable 无法解析单元格中的 HTML 个元素

Question

当一列基本上是 HTML 元素时，我有一个 data.frame。然而，当在浏览器中显示 table 时，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

要在 DT 中解析 HTML，我们需要 escape = FALSE。来自 ?DT::datatable:

escape
whether to escape HTML entities in the table: TRUE means to escape the whole table, and FALSE means not to escape it; alternatively, you can specify numeric column indices or column names to indicate which columns to escape, e.g. 1:5 (the first 5 columns), c(1, 3, 4), or c(-1, -3) (all columns except the first and third), or c('Species', 'Sepal.Length'); since the row names take the first column to display, you should add the numeric column indices by one when using rownames

因此您的代码变为：

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

要做到这一点 table:

或者，我们可以使用 DT::formatStyle() 来设置特定列的样式。在 formatStyle 中，我们可以用驼峰命名法（例如 backgroundColor = "red"）或使用反引号（例如 ``background-color= "red"）调用 CSS 元素。例如：

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

DT::datatable 无法解析单元格中的 HTML 个元素

DT::datatable is failed to parsing HTML elements in cell

html

datatable

dt