我有一个带有DataTables的RStudio Shiny服务器页面,我在下面的示例中使用了TableTools和ColReorder,但是ColVis(Show/hide columns
按钮)的行为方式与{{3}中的示例不同}:
单击Show/hide columns
按钮时,列表会与下方表格中的值混淆,我无法通过再次单击按钮或单击页面中的任何其他位置使列表消失(同样,示例中的数据表页面行为正确)。
另外,我对使用sDom
命令表中的不同元素感到困惑。我希望Show/hide columns
按钮位于右上角而不是左上角。我也不确定如何在表格的sDom
中订购不同的元素,以便在更改列的顺序后,保存为CSV / Excel或隐藏某些列将为我提供新的表格布局而不是原来的。
有什么想法吗?
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")
)
)
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")
)
)
)
)
)
})
#
此外,列排序和列重新排序存在问题: 如果排序然后重新排序列并再次排序,列标题将被翻转。例如,按列深度排序,然后将第一列向左移,然后再次单击标题进行排序,现在我们获得了包含错误列内容的标题深度。见快照:
答案 0 :(得分:6)
一些注意事项:
当前的data.table版本与闪亮的atm不兼容。我们需要1.9.4
版本。然后,我们还需要1.1.0
的{{1}}版本。不幸的是,这引用了一个旧版本的jQuery,它发出了对colvis
的调用。因此需要删除对此jQuery.browser
的引用,它发生在第856行到第859行.sDom属性也有点棘手,它没有出现在新的data.table中,被jQuery.browser
替换。文档位于http://legacy.datatables.net/usage/options#sDom。我们使用此代码段dom
将colVis内容添加到class="cvclear"
。将它置于顶部是通过在<"cvclear"C>
语句的开头对其进行排序来完成的。这有效但我们需要正确对齐它。通常可以通过向类添加sDom
来完成,但由于该类是通过align = "right"
调用启动的,因此我们必须使用HTML5 css sDom
。我们使用text-align:right
添加此内容。
所以上面的内容应该允许我们使用当前闪亮的tags$style
。当闪亮升级到data.table colVis
时,我们应该能够使用当前的1.10.0
插件文件,并且希望不需要修复。
以下适用于我:
的 ui.R 强>
colVis
<强烈> server.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")
)
})
您可以在以下位置查看该应用:
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")
)
)
)
)
)
}
)