如何让DT表格筛选下拉框显示与列内不同的标签值？

数据老陈

2026-6-19

在Shiny的DT表格中实现列内HTML渲染与筛选下拉框显示原始值的方法

要实现列内渲染HTML（比如加粗文本），同时让筛选下拉框显示原始纯文本值，不用因子标签的话，可以通过DT表格的JS回调函数来修改筛选控件的选项内容，以下是完整示例代码：

library(shiny)
library(DT)

ui <- fluidPage(
  DTOutput("my_table")
)

server <- function(input, output) {
  # 构造带HTML标签的数据
  df <- data.frame(
    ID = 1:3,
    Category = c("<b>水果</b>", "<b>蔬菜</b>", "<b>水果</b>"),
    stringsAsFactors = FALSE
  )
  
  output$my_table <- renderDT({
    datatable(
      df,
      escape = FALSE, # 允许列内渲染HTML
      filter = "top", # 开启顶部筛选
      options = list(
        initComplete = JS(
          "function(settings, json) {",
          "  // 定位到Category列的筛选下拉框（索引为1，从0开始）",
          "  var select = $(this.api().table().column(1).header()).next().find('select');",
          "  // 遍历下拉框的每个选项，移除HTML标签",
          "  select.find('option').each(function() {",
          "    $(this).text($(this).text().replace(/<[^>]+>/g, ''));",
          "  });",
          "}"
        )
      )
    )
  })
}

shinyApp(ui, server)

关键说明

escape = FALSE：必须设置这个参数，让DT不转义HTML标签，确保列内的加粗文本能正常渲染。
JS回调initComplete：表格初始化完成后，找到目标列的筛选下拉框，用正则表达式/<[^>]+>/g移除所有HTML标签，只保留纯文本内容作为下拉选项。
列索引注意：JS里的列索引从0开始，示例中Category是第二列，所以用column(1)。