jquery – R闪亮的DataTables ColVis行为

前端之家收集整理的这篇文章主要介绍了jquery – R闪亮的DataTables ColVis行为前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个带有DataTables的RStudio Shiny服务器页面,我在下面的示例中使用了TableTools和ColReorder,但ColVis(显示/隐藏列按钮)的行为方式与 http://datatables.net/extensions/colvis/中的示例不同:

单击“显示/隐藏列”按钮时,列表会与下面表格中的值混淆,并且无法通过再次单击按钮或单击页面中的任何其他位置使列表消失(同样,数据表页面中的示例表现为正确).

另外,我对使用sDom命令表中的不同元素感到困惑.我希望显示/隐藏列按钮位于右上角而不是左上角.我也不确定如何在表的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',singleton(tags$head(tags$script(src='//cdn.datatables.net/colreorder/1.1.1/js/dataTables.colReorder.min.js',singleton(tags$head(tags$script(src='//cdn.datatables.net/colvis/1.1.0/js/dataTables.colVis.min.js',singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/js/ZeroClipboard.min.js',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")
                                                )
                               )
                     )
             )
    )
})

#

此外,列排序和列重新排序存在问题:
如果排序然后重新排序列并再次排序,列标题将被翻转.例如,按列深度排序,然后将第一列向左移,然后再次单击标题进行排序,现在我们获得了包含错误内容标题深度.查看快照:

解决方法

一些说明:

当前的data.table版本与闪亮的atm不兼容.我们需要1.9.4版本.然后我们还需要1.1.0版本的colvis.不幸的是,这引用了一个旧版本的jQuery,它发出了对jQuery.browser的调用.因此需要删除对jQuery.browser的引用,它发生在第856行到第859行.sDom属性也有点棘手,它不会出现在新的data.table中被dom替换.文档位于http://legacy.datatables.net/usage/options#sDom.我们使用此片段<“cvclear”C>将colVis内容添加到class =“cvclear”.将它放在顶部是通过在sDom语句的开头对它进行排序来完成的.这有效但我们需要正确对齐它.通常可以通过向类添加align =“right”来完成,但因为类是通过sDom调用启动的,所以我们必须使用HTML5 css text-align:right.我们使用标签$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',singleton(tags$head(tags$script(src='colvis.js',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',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',tags$head(
        tags$style(HTML("
                        .cvclear{
                         text-align:right}")
        )
      )
    ),dataTableOutput("mytable")
  )
})

server.R

library(shiny)
library(ggplot2)

shinyServer(function(input,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","xls")
        )
      )
    )
  )
  )
}
)

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

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

猜你在找的jQuery相关文章