实现DataTable自动滚动至用户选中行并置顶

你的代码核心问题是未正确获取DataTable实例，导致scrollTo方法无法生效。以下是修正后的完整实现：

# 加载依赖包
library(shiny)
library(DT)

# 构造测试数据
data <- data.frame(
  ID = 1:100,
  Name = LETTERS[1:100],
  Value = rnorm(100)
)

# Shiny应用
shinyApp(
  ui = fluidPage(
    # 给表格设置固定高度，确保出现滚动条
    dataTableOutput("table", style = "height: 400px; overflow-y: auto;"),
    tags$script(HTML(
      "Shiny.addCustomMessageHandler('scrollToSelectedRow', function(selectedRow) {",
      "  // 正确获取DataTable实例",
      "  const table = $('#table').DataTable();",
      "  // 滚动到选中行，指定显示在顶部",
      "  table.row(selectedRow - 1).scrollTo('top');",
      "});"
    ))
  ),
  server = function(input, output, session) {
    output$table <- renderDT({
      datatable(
        data,
        selection = 'single',
        options = list(
          paging = FALSE,
          # 关闭DT自带的滚动，用容器的overflow控制
          scrollY = FALSE
        )
      )
    })
    
    # 监听选中行事件，发送滚动指令
    observeEvent(input$table_rows_selected, {
      session$sendCustomMessage("scrollToSelectedRow", input$table_rows_selected)
    })
  }
)

关键修改说明 #

• 表格容器设置高度：给dataTableOutput添加style = "height: 400px; overflow-y: auto;"，确保表格内容超出时出现垂直滚动条，否则滚动效果无法体现。
• 正确获取DT实例：通过$('#table').DataTable()获取表格实例，#table对应UI中dataTableOutput的ID。
• 指定滚动位置：调用scrollTo('top')让选中行直接滚动到表格可视区域顶部，替代默认的居中显示。

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