使用JS / html控制/延迟Shiny DT数据表的搜索速度

编程问答 2022-08-13

问题描述

我有一个具有很大的Shiny DT表的应用程序，并且已经设法使用JS / html对数据表进行批量搜索（在this example的帮助下）。据我了解，该表是实时搜索的，例如，如果我想在表中查找以“ Ver”开头的项目，一旦我开始键入内容，便会在输入第一个字母后开始搜索，因此我必须缓慢等待，以“ V”开头的项首先出现，然后等待所有具有“ Ve”的项，然后等待“ Ver”。对于下面的简短示例，这不是问题，但在某些用户操作系统和具有很多条目的超大表中是一个问题。

总而言之，我不想每次用户按下键时都进行搜索，而我不想在用户停止输入x秒时进行搜索。我认为根据this post，这称为反跳？

有人可以告诉我这是否可行吗？还是建议解决我的问题的替代方法？

我在下面提供了一个可重现的示例，该示例是从我当前的应用程序修改而来的，该示例运行良好（除了缓慢地搜索和更新表）。

library(shiny)
library(DT)

callback <- '
$("div.search").append($("#mySearch"));
$("#mySearch").on("keyup redraw",function(){
  var splits = $("#mySearch").val().split(" ").filter(function(x){return x !=="";})
  var searchString = "(" + splits.join("|") + ")";
  table.search(searchString,true).draw(true);
});
'

ui <- fluidPage(
  tags$head(tags$style(HTML(".search {float: right;}"))),br(),tags$input(type = "text",id = "mySearch",placeholder = "Search"),DTOutput("dtable")
)

server <- function(input,output){

  output[["dtable"]] <- renderDT({
    datatable(
      iris[c(1,2,51,52,101,102),],options = list(
        dom = "l<'search'>rtip"
      ),callback = JS(callback)
    )
  },server = FALSE)

}

shinyApp(ui,server)

> sessionInfo()
R version 4.0.0 (2020-04-24)
Platform: x86_64-apple-darwin17.0 (64-bit)
Running under: macOS Catalina 10.15.6

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/4.0/Resources/lib/libRlapack.dylib

locale:
[1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8

attached base packages:
[1] stats     graphics  Grdevices utils     datasets  methods   base     

other attached packages:
[1] DT_0.13       shiny_1.4.0.2

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.4.6      digest_0.6.25     later_1.1.0.1     mime_0.9         
 [5] R6_2.4.1          jsonlite_1.6.1    xtable_1.8-4      magrittr_1.5     
 [9] evaluate_0.14     rlang_0.4.6       promises_1.1.0    rmarkdown_2.2    
[13] tools_4.0.0       htmlwidgets_1.5.1 crosstalk_1.1.0.1 rsconnect_0.8.16 
[17] fastmap_1.0.1     httpuv_1.5.4      xfun_0.14         yaml_2.2.1       
[21] compiler_4.0.0    htmltools_0.4.0   knitr_1.28

解决方法

您可以使用setTimeout来延迟搜索。此处为1秒（1000毫秒）：

callback <- '
$("div.search").append($("#mySearch"));
$("#mySearch").on("keyup redraw",function(){
  var splits = $("#mySearch").val().split(" ").filter(function(x){return x !=="";})
  var searchString = "(" + splits.join("|") + ")";
  setTimeout(function(){
    table.search(searchString,true).draw(true);
  },1000);
});
'
dthtmljavascriptrrshiny