r - R闪亮的DT包处理消息和列标题负载避免

Question

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

想想这段简单的代码：

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)

我想实现以下两件事之一：

1. 服务器在整个表准备好渲染之前不渲染任何内容（也就是说，不要坐在那里，列标题存在并且“处理”消息嵌入在该杂乱/混乱中。

2. 服务器开始渲染，但在 UI 上干净、居中、隔离的空间中可以看到“处理”消息。

shinycssloaders我更喜欢带有包的选项#1及其withSpinner在 UI 端的选项。但是，当然，我同样会对 #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)

您也可以隐藏表格：

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

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

您可以通过输入“spinner gif”并在图像中搜索来使用 Google 找到更好的微调器。

---

编辑

这是一种适用于多个表格且不使用 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")
  )