Shinydashboard中DT表格JavaScript按钮渲染异常的解决办法

问题原因 #

DT表格默认会对HTML内容进行转义，导致你生成的按钮HTML代码被直接显示为文本而非渲染成可点击按钮；另外你的includeScript位置错误，JS代码没有被正确加载到页面中。

解决方案 #

以下是修复步骤：

• 禁用DT的HTML转义：在renderDT函数中指定仅对Buttons列关闭转义（更安全，避免其他列的HTML风险），或直接全局关闭转义。
• 修正includeScript的位置：将shiny::includeScript("script.js")移动到dashboardBody内部，确保JS代码被正确注入页面。
• 统一Font Awesome图标类：代码中同时使用了fas和fa类，统一为fas（Font Awesome 5+标准类）避免图标加载异常。

修复后的完整代码 #

library(shiny)
library(shinydashboard)
library(shinythemes)
library(tidyverse)
library(DT)

ui <- dashboardPage(
  dashboardHeader(title="Test"),
  dashboardSidebar(),
  dashboardBody(
    shiny::includeScript("script.js"), # 移至dashboardBody内部确保加载
    column(12,    
           box(
             title = "Available",
             status = "primary",
             solidHeader = TRUE,
             collapsible = TRUE,
             DTOutput("table1", height = "300px")
           ), 
           fluidRow(
             box(
               title = "Current",
               status = "primary",
               background = "green",
               solidHeader = TRUE,
               collapsible = TRUE,
               DTOutput('table2')
             ), 
             box(
               title = "Past",
               status = "primary",
               background = "red",
               solidHeader = TRUE,
               collapsible = TRUE,
               DTOutput('table3')
             ) 
           ) 
    )
  )
) 

# 创建按钮函数
create_btns <- function(x) {
  x %>%
    purrr::map_chr(~ 
                     paste0(
                       '<div class = "btn-group">
                   <button class="btn btn-default action-button btn-info action_button" id="edit_',
                       .x, '" type="button" onclick=get_id(this.id)><i class="fas fa-edit"></i></button>
                   <button class="btn btn-default action-button btn-danger action_button" id="delete_',
                       .x, '" type="button" onclick=get_id(this.id)><i class="fas fa-trash-alt"></i></button></div>'
                     ))
}

# 为数据框添加按钮列
x = create_btns(1:32)
mtcars = mtcars  %>%
  dplyr::bind_cols(tibble("Buttons" = x))

server <- function(input, output, session) {
  rv <- shiny::reactiveValues(
    df = mtcars,
    dt_row = NULL,
    add_or_edit = NULL,
    edit_button = NULL,
    keep_track_id = nrow(mtcars) + 1
  )
  
  # 仅对最后一列（Buttons列）关闭HTML转义
  output$table1 <- renderDT(mtcars, 
                            options = list(scrollX = TRUE, pageLength = 25), 
                            editable = FALSE, 
                            rownames = FALSE,
                            escape = -ncol(mtcars))
  
  output$table2 = renderDT(mtcars, 
                           options = list(scrollX = TRUE), 
                           editable = FALSE, 
                           rownames = FALSE,
                           escape = -ncol(mtcars))
  
  output$table3 = renderDT(mtcars, 
                           options = list(scrollX = TRUE), 
                           editable = FALSE, 
                           rownames = FALSE,
                           escape = -ncol(mtcars))
}

# 运行应用
shinyApp(ui = ui, server = server)

额外说明 #

如果你的script.js中定义了get_id函数，确保它能正确处理按钮点击事件，示例如下：

function get_id(btn_id) {
  console.log("点击的按钮ID: " + btn_id);
  // 向Shiny服务器发送点击事件
  Shiny.onInputChange("selected_btn", btn_id);
}

使用escape = -ncol(mtcars)比全局escape = FALSE更安全，仅允许Buttons列的HTML被渲染，避免其他列的恶意HTML风险。

内容的提问来源于stack exchange，提问作者P5C768