Shiny中含selectInput的DT表格：切换页面后如何保留选择？

当使用server = TRUE的DT表格时，切换页面会重新渲染当前页的DOM元素，导致之前的selectInput选择丢失。要保留选择，需要通过保存用户选择状态并在表格重新渲染时恢复这些状态来实现，具体方案如下：

核心思路 #

• 用reactiveValues存储每个selectInput的选择值，实现跨渲染周期的状态保留
• 监听每个selectInput的输入变化，实时更新存储的状态
• 生成表格时，根据存储的状态为每个selectInput设置selected参数，恢复之前的选择

修改后的完整代码 #

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(
    DT::dataTableOutput("mytable")
  ),
  server = function(input, output, session) {
    # 初始化存储选择状态的reactiveValues
    selected_vals <- reactiveValues()
    
    # 生成表格数据：根据保存的状态动态生成selectInput
    generate_df <- function() {
      df <- data.frame(
        Col1 = sapply(1:20, function(i) {
          input_id <- paste0("input", i)
          # 从存储中获取当前选择，默认选第一个选项
          current_val <- if (!is.null(selected_vals[[input_id]])) {
            selected_vals[[input_id]]
          } else {
            letters[1]
          }
          as.character(selectInput(
            inputId = input_id,
            label = NULL,
            choices = letters[1:3],
            selected = current_val  # 设置保存的选择值
          ))
        })
      )
      df
    }
    
    # 监听所有selectInput的变化，更新存储的状态
    observe({
      lapply(1:20, function(i) {
        input_id <- paste0("input", i)
        selected_vals[[input_id]] <- input[[input_id]]
      })
    })
    
    output$mytable <- DT::renderDataTable({
      DT::datatable(
        data = generate_df(),
        selection = "none",
        rownames = FALSE,
        escape = FALSE,
        server = TRUE  # 保持服务器端处理
      )
    })
    
    # 兼容datatableProxy和replaceData的场景（如果需要动态更新表格）
    # 示例：假设后续需要用replaceData更新，只需调用generate_df()获取最新状态的表格数据
    # proxy <- dataTableProxy("mytable")
    # observeEvent(some_trigger, {
    #   replaceData(proxy, generate_df(), resetPaging = FALSE)
    # })
  }
)

关键代码解释 #

1. selected_vals <- reactiveValues()：创建响应式存储对象，用来保存每个selectInput的选择值，不会因为表格重新渲染而丢失。
2. generate_df()函数：动态生成表格数据，每次渲染表格时，都会根据selected_vals里保存的值为对应selectInput设置selected参数，恢复之前的选择。
3. observe监听输入变化：实时捕获每个selectInput的选择变更，同步更新selected_vals中的存储值，确保状态最新。
4. 兼容服务器端处理：保持server = TRUE，同时通过状态存储和动态生成selectInput，解决页面切换后的选择重置问题，也能适配datatableProxy和replaceData的使用场景。

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