R Shiny中DT表格重计算时页面滚动条跳顶的解决方法咨询

问题根源是每次表格重新计算时，DT会完全重建表格DOM结构，导致页面滚动位置被重置。以下是两种可行的解决方案：

方案一：使用replaceData更新数据（推荐） #

这种方法不会重建整个表格，仅更新数据内容，能保留滚动位置和表格的其他状态（比如排序、筛选），效率更高。

修改后的代码如下：

library(shiny)
library(DT)

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

server <- function(input, output, session) {
  # 自动刷新定时器
  autoInvalidate <- reactiveTimer(2000, session)
  
  dd <- reactive({
    autoInvalidate()
    data.frame(x = rnorm(10000))
  })
  
  # 初始化表格
  output$tab <- renderDT({
    datatable(dd(), options = list(pageLength = 500))
  })
  
  # 监听数据变化，用replaceData更新表格内容
  observeEvent(dd(), {
    req(input$tab_rows_current)  # 确保表格已初始化
    replaceData(dataTableProxy("tab"), dd(), resetPaging = FALSE)
  })
}

shinyApp(ui, server)

关键说明：

• dataTableProxy("tab")创建表格代理，用于操作已渲染的表格
• replaceData仅更新表格数据，resetPaging = FALSE保留当前分页状态（同时保留滚动位置）
• req(input$tab_rows_current)确保表格完成初始化后再执行更新

方案二：记录并恢复页面滚动位置 #

如果必须重建表格，可以通过JavaScript记录刷新前的滚动位置，刷新后恢复：

修改后的代码：

library(shiny)
library(DT)

ui <- fluidPage(
  tags$script(HTML("
    // 记录滚动位置
    let scrollPos = 0;
    $(document).on('shiny:inputchanged', function(event) {
      if(event.name === 'refreshTrigger') {
        scrollPos = $(window).scrollTop();
      }
    });
    // 恢复滚动位置
    $(document).on('shiny:value', function(event) {
      if(event.name === 'tab') {
        $(window).scrollTop(scrollPos);
      }
    });
  ")),
  DTOutput("tab"),
  # 隐藏的触发输入，用于通知JS记录滚动位置
  hidden(textInput("refreshTrigger", ""))
)

server <- function(input, output, session) {
  autoInvalidate <- reactiveTimer(2000, session)
  
  dd <- reactive({
    autoInvalidate()
    # 触发JS记录滚动位置
    updateTextInput(session, "refreshTrigger", value = as.character(Sys.time()))
    data.frame(x = rnorm(10000))
  })
  
  output$tab <- renderDT({
    datatable(dd(), options = list(pageLength = 500))
  })
}

shinyApp(ui, server)

关键说明：

• 通过shiny:inputchanged事件监听刷新触发信号，记录当前滚动位置
• 通过shiny:value事件监听表格渲染完成，恢复之前的滚动位置
• 用隐藏的refreshTrigger输入作为刷新通知的媒介

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