如何在R Shiny中使用JS DataTables API 解决.DataTable()未识别报错

错误根源 #

• 脚本加载顺序错误：你放在head中的自定义JS执行时，DataTables核心依赖还未完成加载，导致.dataTable()方法未被识别
• 选择器语法错误：jQuery按id选择元素需要添加#前缀，正确写法为$('#summary_table')而非$('summary_table')
• 执行时机错误：页面初始加载时Shiny还未渲染DT表格的DOM元素，此时执行JS无法找到目标元素；且DT包会自动完成表格初始化，无需手动调用初始化方法

可直接运行的无报错示例 #

本示例用内置mtcars数据集，无需修改即可直接运行，运行后控制台无DataTables相关报错，且可以正常调用DataTables的API：

library(shiny)
library(dplyr)
library(DT)

# 用内置数据集替代本地csv，方便直接运行
summary_table <- mtcars %>% 
  mutate(across(everything(), as.factor))
summary_data_table <- DT::datatable(summary_table, filter = "top")

ui <- basicPage(
  DTOutput("summary_table"),
  # 监听Shiny渲染完成事件，等表格渲染后再获取DT实例
  tags$script(HTML("
    // 监听summary_table渲染完成事件
    $(document).on('shiny:value', function(event) {
      if(event.name === 'summary_table') {
        // 等待DOM渲染完成
        setTimeout(function() {
          // 获取已初始化的DT实例，无需重复初始化
          var table = $('#summary_table table').DataTable();
          // 示例API调用：打印表格总行数，验证API可用
          console.log('表格总行数：', table.rows().count());
        }, 50);
      }
    });
  "))
)

server <- function(input, output) {
  output$summary_table <- DT::renderDataTable(summary_data_table)
}

shinyApp(ui = ui, server = server)

验证说明 #

运行应用后打开浏览器开发者控制台，可看到打印的表格总行数，无$(...).dataTable is not a function类报错，后续你可以基于获取到的table实例调用所有DataTables原生API。

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