R闪亮的DataTables ColVis行为 [英] R shiny DataTables ColVis behavior

查看:157
本文介绍了R闪亮的DataTables ColVis行为的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我得到了一个带有DataTables的RStudio Shiny服务器页面,我在下面的示例中可以使用TableTools和ColReorder,但是ColVis(显示/隐藏列按钮)不起作用与。我们将colVis内容添加到 class =cvclear中,使用该代码段<cvclearC> 。将它放在顶部是通过在 sDom 语句的开始进行排序来完成的。不过,我们需要正确对齐它。通常,通过将 align =right添加到类中,但是通过 sDom 打电话给我们,而不用使用HTML5 css text-align:right 。我们使用标签$ style 添加它们。



所以上面应该允许我们使用当前有光泽的 colVis 当光盘升级到data.table 1.10.0 时,我们应该可以使用当前的 colVis 插件文件



以下内容适用于我:



ui.R

获取colVis js文件并删除行
库(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($ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $标签$ 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(标签$ 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'))),
s ingleton(标签$ script(HTML(if(window.innerHeight< 400)alert('Screen too small');))),
singleton(tags $ head(tags $ link(href ='https://raw.githubusercontent.com/DataTables/ColVis/18b52dfdd7255ffe96a92aadc16cadd70e3e174a/media
,标签$ head(
标签$ style(HTML(
.cvclear $


),
dataTableOutput(mytable)

})

server.R


$ b $
库(ggplot2)

ShinyServer(函数(输入,输出,会话){
输出$ mytable = renderDataTable({
diamonds [,1:6]
},options = list(
sDom='RMD<cvclearC><clearT> lfrtip ',
oTableTools= list(
sSwfPath=//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls.swf,
aButtons= lis t(
copy,
print,
list(sExtends=collection,
sButtonText=Save,
aButtons = c(csv,xls)





}

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

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


I got an RStudio Shiny server page with DataTables, and I got TableTools and ColReorder working in the example below, but ColVis (Show/hide columns button) is not behaving in the same way as the example in http://datatables.net/extensions/colvis/ :

When clicking the Show/hide columns button, the list mixes up with the values in the table underneath, and I cannot make the list disappear by clicking the button again or clicking anywhere else in the page (again, the example in the datatables page behaves correctly).

Also, I am confused about using sDom to order the different elements in the table. I would like the Show/hide columns button to be on the top right instead of top left. I am also not sure how to order the different elements in the sDom of the table so that after changing the order of the columns, saving to CSV/Excel or hiding some column will give me the new table layout instead of the original one.

Any ideas?

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")
      )
)

server.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")
                                                )
                               )
                     )
             )
    )
})

#

Also, there is an issue with column sorting and column reorder: if one sorts then reorders columns and sorts again, the column headers are flipped around. For example, sort by column depth, then shift column one to the left, then click on header again to sort, now we got header depth with content from the wrong column. See snapshot:

解决方案

Some notes:

The current data.table version is incompatible with shiny atm. We need the 1.9.4 version. We then also need the pre 1.1.0 version of colvis. Unfortunately this referred to an old version of jQuery that issued a call to jQuery.browser. So reference to this jQuery.browser needs to be removed it occurs in line 856 to 859. The sDom attribute is also a bit tricky it doesnt appear in the new data.table being replaced by dom. Documentation is at http://legacy.datatables.net/usage/options#sDom. We add the colVis content to a class="cvclear" using this snippet <"cvclear"C>. Placing it at the top is done by ordering it at the start of the sDom statement. This works however we need to right align it. Normally that would be done by adding align = "right" to the class but because the class is initiated thru the sDom call we instead have to use the HTML5 css text-align:right. We add this using tags$style.

So the above should allow us to use colVis with the current shiny. When shiny upgrades to data.table 1.10.0 then we should be able to use the current colVis plugin files and the fixes hopefully wont be necessary.

The following works for me:

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")
        )
      )
    )
  )
  )
}
)

You can view the app at:

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

这篇关于R闪亮的DataTables ColVis行为的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆