R闪亮的DataTables ColVis行为

Posted 2023-02-14

技术标签:

【中文标题】R闪亮的DataTables ColVis行为【英文标题】：R shiny DataTables ColVis behavior 【发布时间】：2014-08-29 01:48:28 【问题描述】：

我得到了一个带有 DataTables 的 RStudio Shiny 服务器页面，并且我得到了 TableTools 和 ColReorder 在下面的示例中工作，但是 ColVis（Show/hide columns 按钮）的行为方式与 http://datatables.net/extensions/colvis/ 中的示例不同：

单击Show/hide columns 按钮时，列表与下表中的值混合在一起，我无法通过再次单击该按钮或单击页面中的任何其他位置来使列表消失（再次，数据表中的示例页面行为正确）。

另外，我对使用sDom 对表中的不同元素进行排序感到困惑。我希望Show/hide columns 按钮位于右上角而不是左上角。我也不确定如何在表格的sDom 中订购不同的元素，以便在更改列的顺序后，保存到 CSV/Excel 或隐藏某些列会给我新的表格布局而不是原来的布局.

有什么想法吗？

ui.R

shinyUI(pageWithSidebar(

h1('Diamonds DataTable with TableTools'),
        tagList(
                  singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js',type='text/javascript'))),
                  singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/js/TableTools.min.js',type='text/javascript'))),
                  singleton(tags$head(tags$script(src='//cdn.datatables.net/colreorder/1.1.1/js/dataTables.colReorder.min.js',type='text/javascript'))),
                  singleton(tags$head(tags$script(src='//cdn.datatables.net/colvis/1.1.0/js/dataTables.colVis.min.js',type='text/javascript'))),
                  singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/js/ZeroClipboard.min.js',type='text/javascript'))),
                  singleton(tags$head(tags$link(href='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/css/TableTools.min.css',rel='stylesheet',type='text/css'))),
                  singleton(tags$script(html("if (window.innerHeight < 400) alert('Screen too small');")))
                ),
        dataTableOutput("mytable")
      )
)

服务器.R

shinyServer(function(input, output, session) 
output$mytable = renderDataTable(
          diamonds[,1:6]
      , options = list(
               "sDom" = 'RMDCT<"clear">lfrtip',
               "oTableTools" = list(
                       "sSwfPath" = "//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls.swf",
                       "aButtons" = list(
                                 "copy",
                                 "print",
                                 list("sExtends" = "collection",
                                                     "sButtonText" = "Save",
                                                     "aButtons" = c("csv","xls")
                                                )
                               )
                     )
             )
    )
)

此外，列排序和列重新排序存在问题：如果一个排序然后重新排序列并再次排序，则列标题会翻转。例如，按列深度排序，然后将第一列向左移动，然后再次单击标题进行排序，现在我们得到了标题深度以及来自错误列的内容。查看快照：

【问题讨论】：

这个库只需要sDom 选项。那么小部件应该正确显示。但是，小部件会更改 DOM 中的对象，因此您可能需要合并对 Shiny.unbindAll() 和 Shiny.bindAll() 的调用，请参阅 groups.google.com/forum/#!msg/shiny-discuss/IE6aQfKXd1I/… 这个Shiny.unbindAll() 和Shiny.bindAll() 调用应该相对于表在哪里进行？ 【参考方案1】：

一些注意事项：

当前的 data.table 版本与闪亮的 atm 不兼容。我们需要1.9.4 版本。然后我们还需要colvis 的预1.1.0 版本。不幸的是，这指的是旧版本的 jQuery，它发出了对jQuery.browser 的调用。所以需要删除对这个jQuery.browser 的引用，它出现在第856 行到第859 行。sDom 属性也有点棘手，它不会出现在被dom 替换的新data.table 中。文档位于http://legacy.datatables.net/usage/options#sDom。我们使用这个 sn-p <"cvclear"C> 将 colVis 内容添加到 class="cvclear"。将它放在顶部是通过在sDom 语句的开头对其进行排序来完成的。这可行，但是我们需要正确对齐它。通常这可以通过在类中添加align = "right" 来完成，但由于类是通过sDom 调用启动的，因此我们必须使用HTML5 css text-align:right。我们使用tags$style 添加它。

所以上面应该允许我们使用colVis 与当前闪亮。当对 data.table 1.10.0 进行闪亮升级时，我们应该能够使用当前的 colVis 插件文件，并且希望不需要修复。

以下对我有用：

ui.R

# get the colVis js file and delete lines 
library(RCurl)
write(getURL("https://raw.githubusercontent.com/openMF/mifosx-community-apps/master/IndividualLendingGeneralJavaScript/resources/libs/DataTables-1.9.4/extras/ColVis/media/js/ColVis.js")
      , file = 'www/colvis.js')
tf <- readLines("www/colvis.js")[-c(856:859)]
write(tf, file = "www/colvis.js")
shinyUI(
  pageWithSidebar(

    h1('Diamonds DataTable with TableTools'),
    tagList(
      singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js',type='text/javascript'))),
      singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/js/TableTools.min.js',type='text/javascript'))),
      singleton(tags$head(tags$script(src='//cdn.datatables.net/colreorder/1.1.1/js/dataTables.colReorder.min.js',type='text/javascript'))),
      singleton(tags$head(tags$script(src='colvis.js',type='text/javascript'))),
      singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/js/ZeroClipboard.min.js',type='text/javascript'))),
      singleton(tags$head(tags$link(href='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/css/TableTools.min.css',rel='stylesheet',type='text/css'))),
      singleton(tags$head(tags$link(href='https://raw.githubusercontent.com/openMF/mifosx-community-apps/master/IndividualLendingGeneralJavaScript/resources/libs/DataTables-1.9.4/extras/ColVis/media/css/ColVis.css',rel='stylesheet',type='text/css'))),     
      singleton(tags$script(HTML("if (window.innerHeight < 400) alert('Screen too small');"))),
      singleton(tags$head(tags$link(href='https://raw.githubusercontent.com/DataTables/ColVis/18b52dfdd7255ffe96a92aadc16cadd70e3e174a/media/css/ColVis.css',rel='stylesheet',type='text/css')))  
      , tags$head(
        tags$style(HTML("
                        .cvclear
                         text-align:right")
        )
      )
    ),
    dataTableOutput("mytable")
  )
)

server.R

library(shiny)
library(ggplot2)

shinyServer(function(input, output, session) 
  output$mytable = renderDataTable(
    diamonds[,1:6]
  , options = list(
    "sDom" = 'RMD<"cvclear"C><"clear"T>lfrtip',
    "oTableTools" = list(
      "sSwfPath" = "//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls.swf",
      "aButtons" = list(
        "copy",
        "print",
        list("sExtends" = "collection",
             "sButtonText" = "Save",
             "aButtons" = c("csv","xls")
        )
      )
    )
  )
  )

)

您可以在以下位置查看应用程序：

http://128.199.255.233:3838/userApps/john/cvtestapp/

【讨论】：

我现在大部分时间都在工作，除非一个排序然后重新排序列并再次排序，列标题会翻转。例如，按depth 列排序，然后将第一列向左移动，然后再次单击标题进行排序，现在我们得到标题depth 的内容来自错误的列...（问题中的快照）跨度> ColReorder 和排序中的错误仍然存在，但我认为这可能与此问题有关，因此我将将此答案标记为已接受:-)

以上是关于R闪亮的DataTables ColVis行为的主要内容，如果未能解决你的问题，请参考以下文章

在闪亮的R中添加dataTables插件

无效的 JSON - DataTables - Kubernetes 上的 R ShinyProxy

r 闪亮的条件行为

R闪亮：observeEvent和eventReactive的不同行为

具有父/子关系的闪亮可折叠数据表

以闪亮的意外行为取消组合和选择