So erhalten Sie DT :: datatable zu aktualisieren, wenn ausgeblendet

Question

Wenn datatable s in Shiny ausgeblendet sind, scheinen sie nicht zu aktualisieren, auch wenn outputOptions(output, 'tableID', suspendWhenHidden=FALSE) verwendet wird. Unten ist ein MRE. Wenn Sie die datatable ausblenden und dann Zeilen hinzufügen oder löschen und dann die datatable anzeigen, sehen Sie, dass sie nicht aktualisiert wird. Sobald Sie jedoch die datatable ändern, während sie sichtbar ist, "holen" alle früheren Änderungen damit "auf". Wie können wir datatable s erzwingen, sich neu zu zeichnen, während sie versteckt sind?

#ui 
shinyUI(
    #tags$head(tags$script(src="main.js")), 
    fluidPage( 
    titlePanel("Modifying Hidden Datatable"), 
    sidebarLayout(  
     sidebarPanel(
     actionButton("decrease", "Decrease Row Number"), 
     actionButton("increase", "Increase Row Number"), 
     actionButton("hide", "Hide Data Table"), 
     actionButton("show", "Show Data Table") 
    ), 
     mainPanel(
     tags$head(tags$script(src="main.js")), 
     DT::dataTableOutput("df") 
    ) 
    ) 
) 
) 

#server 
library(shiny) 
library(DT) 

shinyServer(function(input, output, session) { 

    values = reactiveValues(n = 1) 

    observeEvent(input$decrease, { 
    values$n = values$n - 1 
    if (values$n == 0) values$n = 1 
    }) 

    observeEvent(input$increase, { 
    values$n = values$n + 1 
    if (values$n > nrow(mtcars)) values$n = nrow(mtcars) 
    }) 

    output$df = renderDataTable({ 
    df = mtcars[1:values$n, ] 
    DT::datatable(df) 
    }) 
    outputOptions(output, "df", suspendWhenHidden=FALSE) 
}) 

#javascript 
$(document).ready(function() { 
    $('#hide').click(function() { 
    $('#df').hide(); 
    }); 
    $('#show').click(function() { 
    $('#df').show(); 
    }); 
}); 

Answer 1

Es stellt sich heraus, dass, wenn Sie bereits Javascript verwenden, können Sie einfach auf den Tisch draw Funktion aufrufen. Der folgende JavaScript-Code sollte funktionieren:

$(document).ready(function() { 
    $('#hide').click(function() { 
    $('#df').hide(); 
    }); 
    $('#show').click(function() { 
    $('#df').show(); 
    $("#df table").DataTable().draw(); 
    }); 
});