R 闪亮 DT 包处理消息和列 header 负载避免

Question

我正在使用 shiny 使用 DT 包渲染一个非常大的 table。

想想这段简单的代码：

library(shiny)
library(DT)

ui <- fluidPage(
  DT::dataTableOutput('mytable')
  )

server <- function(input, output, session) {
  output$mytable <- DT::renderDataTable({
    df <- data.frame(
      x = 1:10000000, y = sample(letters, 10000000, replace = TRUE),
      stringsAsFactors = FALSE
      )
    df %>%
      datatable()
  })
}

shinyApp(ui = ui, server = server)

我想实现以下两个目标之一：

服务器渲染 NOTHING 直到整个 table 准备好渲染（也就是说，不要坐在那里，列 header 存在并且嵌入 'processing' 消息在那混乱/混乱中。
服务器开始呈现，但 'processing' 消息在 UI.
上清晰、居中、隔离 space 可见

我更喜欢带有 shinycssloaders 包的选项 #1 及其在 UI 端的 withSpinner 选项。但是，当然，我对 #2 作为解决方案同样感到满意。

Answer 1

你可以这样做：

library(shiny)
library(DT)

css <- "
#busy { 
  position: absolute;
  z-index: 1000;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -200px;
  display: none;
  background-color: rgba(230,230,230,.8);
  text-align: center;
  padding-top: 20px;
  padding-left: 30px;
  padding-bottom: 40px;
  padding-right: 30px;
  border-radius: 5px;
}"

js <- "
$(document).on('preInit.dt', function(e, settings){
  $('#busy').show();
});
"

initComplete <- JS(
  "function(settings, json){",
  "  $('#busy').hide();",
  "}"
)

ui <- fluidPage(
  
  tags$head(
    tags$style(HTML(css)),
    tags$script(HTML(js))
  ),
  
  tags$div(
    id = "busy", 
    tags$img(
      src = "http://cdn.lowgif.com/full/111c23b7d2d13458-loading-bar-animated-gif-transparent-background-6-gif-images-download.gif",
      width = "400"
    )
  ),
  
  DTOutput("mytable")
  
) 

server <- function(input, output, session) {
  
  output$mytable <- renderDT({
    df <- data.frame(
      x = 1:10000000, y = sample(letters, 10000000, replace = TRUE),
      stringsAsFactors = FALSE
    )
    df %>% datatable(
      options = list(
        initComplete = initComplete
      )
    )
  })
  
}

shinyApp(ui, server)

您也可以隐藏 table：

js <- "
$(document).on('preInit.dt', function(e, settings){
  $('#busy').show();
  $('#mytable').hide();
});
"

initComplete <- JS(
  "function(settings, json){",
  "  $('#busy').hide();",
  "  $('#mytable').show();",
  "}"
)

您可以使用 Google 找到更好的微调器，方法是输入“微调器 gif”并在图像中搜索。

编辑

这是一种适用于多个 table 且不使用 GIF 图像的方法，微调器完全由 CSS 制作。

library(shiny)
library(DT)    

js <- "
$(document).on('preInit.dt', function(e, settings){
  var api = new $.fn.dataTable.Api( settings );
  var $container = $(api.table().node()).closest('.datatables');
  $container.find('>:first-child').css('visibility','hidden');
  $container.prepend('<div class=\"loader\"></div>');
});
"

initComplete <- JS(
  "function(settings, json){",
  "  var $container = $(this.api().table().node()).closest('.datatables');",
  "  $container.find('.loader').remove();",
  "  $container.find('>:first-child').css('visibility', 'visible');",
  "}"
)

css <- "
.loader {
  position: relative;
  top: 60px;
  left: 50%;
  z-index: 1000;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
"

ui <- fluidPage(
  
  tags$head(
    tags$style(HTML(css)),
    tags$script(HTML(js))
  ),
  
  DTOutput("mytable"),
  br(),
  DTOutput("mytable2")
  
) 

server <- function(input, output, session) {
  
  output$mytable <- renderDT({
    df <- data.frame(
      x = 1:1000000, y = sample(letters, 1000000, replace = TRUE),
      stringsAsFactors = FALSE
    )
    df %>% datatable(
      options = list(
        initComplete = initComplete
      )
    )
  })
      
  output$mytable2 <- renderDT({
    df <- data.frame(
      x = 1:1000000, y = sample(letters, 1000000, replace = TRUE),
      stringsAsFactors = FALSE
    )
    df %>% datatable(
      options = list(
        initComplete = initComplete
      )
    )
  })
  
}

shinyApp(ui, server)

如果您更喜欢将外部文件用于 JavaScript 代码和 CSS 代码，请将 js 字符串的内容保存到文件 loader.js和css字符串的内容放入文件loader.css；将这两个文件保存在您应用程序的 www 子文件夹中，并在 Shiny UI 中替换

  tags$head(
    tags$style(HTML(css)),
    tags$script(HTML(js))
  )

和

  tags$head(
    tags$link(href = "loader.css", rel = "stylesheet"),
    tags$script(src = "loader.js")
  )

R 闪亮 DT 包处理消息和列 header 负载避免

R shiny DT Package processing message and column header load avoidance

r

shiny

dt

shinycssloaders

编辑