DT:重新渲染表后链接绑定丢失 [英] DT: Link binding is lost after re-rendering the table

问题描述

我试图通过单击嵌套在数据表中的链接导航到下一个选项卡.

首先使用 Shiny.bindAll 可以正常工作.

图书馆(闪亮)图书馆(DT)图书馆(dplyr)ui <-流体页面(tabsetPanel(id =面板"，tabPanel(A",selectInput("sel", "Select", options = c(1,2)),DTOutput("tab")),tabPanel(B",h3(一些信息"),tags$li("Item 1"),tags$li("Item 2"),actionLink(goToTabPanelA"，goToTabPanelA"))))服务器 <- 功能(输入，输出，会话){DF <- data.frame(a = c(1,2),b = c(HTML('<a id="goToTabPanelB1" class="action-button" href="#">goToTabPanelB1</a>'),HTML('<a id="goToTabPanelB2" class="action-button" href="#">goToTabPanelB2</a>')))输出$tab <- renderDataTable({数据表(DF %>% 过滤器(a %in% input$sel)，逃逸 = FALSE，选择 = '无',选项 = 列表(preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')))})观察事件(c(输入$goToTabPanelB1，输入$goToTabPanelB2)，{updateTabsetPanel(会话，面板"，B")})观察事件(输入$goToTabPanelA，{updateTabsetPanel(会话，面板"，A")})}闪亮应用程序(用户界面，服务器)

解决方案

另一种更简洁的方法(因为它一直对链接使用相同的 ID)是通过使用 dataTableProxy 和 replaceData 来避免重新渲染数据表:

图书馆(闪亮)图书馆(DT)图书馆(dplyr)DF <- data.frame(id = paste0(c(goToTabPanelB1", goToTabPanelB2")),a = c(1,2),b = c(HTML('<a id="goToTabPanelB1" class="action-button" href="#">goToTabPanelB1</a>'),HTML('<a id="goToTabPanelB2" class="action-button" href="#">goToTabPanelB2</a>')))ui <-流体页面(tabsetPanel(id =面板"，tabPanel(A",selectInput("sel", "Select", options = c(1,2)),DTOutput("tab")),tabPanel(B",h3(一些信息"),tags$li("Item 1"),tags$li("Item 2"),actionLink(goToTabPanelA"，goToTabPanelA"))))服务器 <- 功能(输入，输出，会话){输出$tab <- renderDataTable({数据表(东风，逃逸 = FALSE，选择 = '无',选项 = 列表(preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')))}, 服务器 = TRUE)tabProxy <- dataTableProxy("tab", session)观察事件(输入$sel，{替换数据(tabProxy，数据 = DF[输入$sel，])})观察事件(c(输入$goToTabPanelB1，输入$goToTabPanelB2)，{updateTabsetPanel(会话，面板"，B")})观察事件(输入$goToTabPanelA，{updateTabsetPanel(会话，面板"，A")})}闪亮应用程序(用户界面，服务器)

---

初步回答:

一种可能的解决方法是在重新呈现数据表时提供带有新 ID 的链接(a 标签)(请参阅下面的代码).

我仍然想了解如果 id 是静态的并且重新渲染数据表会发生什么(因此我提供了赏金).

问题似乎与此处所述的问题类似.

图书馆(闪亮)图书馆(DT)图书馆(dplyr)ui <-流体页面(tabsetPanel(id =面板"，tabPanel(A",selectInput("sel", "Select", options = c(1,2)),DTOutput("tab")),tabPanel(B",h3(一些信息"),tags$li("Item 1"),tags$li("Item 2"),actionLink(goToTabPanelA"，goToTabPanelA"))))服务器 <- 功能(输入，输出，会话){DF <- 反应性({# 强制更新idtmpId <- as.integer(Sys.time())tmpDF <- data.frame(id = paste0(c(goToTabPanelB1", goToTabPanelB2"), tmpId),a = c(1,2),b = c(HTML(sprintf('<a id=goToTabPanelB1%s"类=动作按钮"href=#">goToTabPanelB1</a>', tmpId)),HTML(sprintf('<a id="goToTabPanelB2%s" class="action-button" href="#">goToTabPanelB2</a>', tmpId))))tmpDF[输入$sel,]})输出$tab <- renderDataTable({数据表(DF(),逃逸 = FALSE，选择 = '无',选项 = 列表(preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')))}, 服务器 = FALSE)观察事件(lapply(DF()$ id，函数(x){输入[[x]]})，{updateTabsetPanel(会话，面板"，B")})观察事件(输入$goToTabPanelA，{updateTabsetPanel(会话，面板"，A")})}闪亮应用程序(用户界面，服务器)

相关链接:

• 绑定/解除绑定数据表时的反应性问题
• https://github.com/rstudio/shiny/issues/1246
• DT 中的文本输入::datatable 解除绑定，我无法重新绑定

I am trying to navigate to the next tabs by clicking on a link nested in a datatable.

This works fine at first using Shiny.bindAll. Here you can find an explanation from Joe Cheng regarding the use of the function.

However, when the datatable is re-rendered by filtering the input data via the selectInput the binding is lost when switching back from 2 to 1:

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

ui <- fluidPage(tabsetPanel(
  id = "panels",
  tabPanel("A",
           selectInput("sel", "Select", choices = c(1,2)),
           DTOutput("tab")),
  tabPanel("B",
           h3("Some information"),
           tags$li("Item 1"),
           tags$li("Item 2"),
           actionLink("goToTabPanelA", "goToTabPanelA")
  )
))

server <- function(input, output, session) {
  DF <- data.frame(a = c(1,2),
                   b = c(HTML('<a id="goToTabPanelB1" class="action-button" href="#">goToTabPanelB1</a>'),
                         HTML('<a id="goToTabPanelB2" class="action-button" href="#">goToTabPanelB2</a>')))
  
  output$tab <- renderDataTable({
    datatable(
      DF %>% filter(a %in% input$sel),
      escape = FALSE,
      selection = 'none',
      options = list(
        preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
        drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
      )
    )
  })
  
  observeEvent(c(input$goToTabPanelB1, input$goToTabPanelB2), {
    updateTabsetPanel(session, "panels", "B")
  })
  
  observeEvent(input$goToTabPanelA, {
    updateTabsetPanel(session, "panels", "A")
  })
}

shinyApp(ui, server)

解决方案

Edit:

Another cleaner approach (as it keeps using the same id's for the links) is to avoid re-rendering the datatable by using dataTableProxy along with replaceData:

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

DF <- data.frame(id = paste0(c("goToTabPanelB1", "goToTabPanelB2")),
                 a = c(1,2),
                 b = c(HTML('<a id="goToTabPanelB1" class="action-button" href="#">goToTabPanelB1</a>'),
                       HTML('<a id="goToTabPanelB2" class="action-button" href="#">goToTabPanelB2</a>')))

ui <- fluidPage(tabsetPanel(
  id = "panels",
  tabPanel("A",
           selectInput("sel", "Select", choices = c(1,2)),
           DTOutput("tab")),
  tabPanel("B",
           h3("Some information"),
           tags$li("Item 1"),
           tags$li("Item 2"),
           actionLink("goToTabPanelA", "goToTabPanelA")
  )
))

server <- function(input, output, session) {
  
  output$tab <- renderDataTable({
    datatable(
      DF,
      escape = FALSE,
      selection = 'none',
      options = list(
        preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
        drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
      )
    )
  }, server = TRUE)
  
  tabProxy <- dataTableProxy("tab", session)
  
  observeEvent(input$sel, {
    replaceData(tabProxy, data = DF[input$sel,])
  })
  
  observeEvent(c(input$goToTabPanelB1, input$goToTabPanelB2), {
    updateTabsetPanel(session, "panels", "B")
  })
  
  observeEvent(input$goToTabPanelA, {
    updateTabsetPanel(session, "panels", "A")
  })
}

shinyApp(ui, server)

---

Initial answer:

A possible workaround is providing the links (a-tags) with new id's on re-rendering the datatable (see the code below).

Still I'd like to understand what is going on if the id's are static and the datatable get's re-rendered (therefore I offered the bounty).

The problem seems similar to the one described here.

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

ui <- fluidPage(tabsetPanel(
  id = "panels",
  tabPanel("A",
           selectInput("sel", "Select", choices = c(1,2)),
           DTOutput("tab")),
  tabPanel("B",
           h3("Some information"),
           tags$li("Item 1"),
           tags$li("Item 2"),
           actionLink("goToTabPanelA", "goToTabPanelA")
  )
))

server <- function(input, output, session) {
  DF <- reactive({
    # force id to update
    tmpId <- as.integer(Sys.time())
    tmpDF <- data.frame(id = paste0(c("goToTabPanelB1", "goToTabPanelB2"), tmpId),
               a = c(1,2),
               b = c(HTML(sprintf('<a id="goToTabPanelB1%s" class="action-button" href="#">goToTabPanelB1</a>', tmpId)),
                     HTML(sprintf('<a id="goToTabPanelB2%s" class="action-button" href="#">goToTabPanelB2</a>', tmpId))))
    
    tmpDF[input$sel,]
    })
  
  output$tab <- renderDataTable({
    datatable(
      DF(),
      escape = FALSE,
      selection = 'none',
      options = list(
        preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
        drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
      )
    )
  }, server = FALSE)
  
  observeEvent(lapply(DF()$id, function(x){input[[x]]}), {
    updateTabsetPanel(session, "panels", "B")
  })
  
  observeEvent(input$goToTabPanelA, {
    updateTabsetPanel(session, "panels", "A")
  })
}

shinyApp(ui, server)

Related links:

• Trouble with reactivity when binding/unbinding DataTable
• https://github.com/rstudio/shiny/issues/1246
• Text Input in DT::datatable unbinds and I can't rebind it

这篇关于DT:重新渲染表后链接绑定丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！