[英]R shiny DataTables ColVis behavior
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/ : 我有一个带有DataTables的RStudio Shiny服务器页面,我在下面的示例中使用了TableTools和ColReorder,但是ColVis( Show/hide columns
按钮)的行为方式与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). 单击“ Show/hide columns
按钮时,列表会与下面表格中的值混淆,并且无法通过再次单击按钮或单击页面中的任何其他位置使列表消失(同样,数据表页面中的示例表现为正确)。
Also, I am confused about using sDom
to order the different elements in the table. 另外,我对使用sDom
命令表中的不同元素感到困惑。 I would like the Show/hide columns
button to be on the top right instead of top left. 我希望Show/hide columns
按钮位于右上角而不是左上角。 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. 我也不确定如何在表格的sDom
中订购不同的元素,以便在更改列的顺序后,保存到CSV / Excel或隐藏某些列将为我提供新的表格布局而不是原始的布局。
Any ideas? 有任何想法吗?
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")
)
)
)
)
)
})
#
#
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. 当前的data.table版本与闪亮的atm不兼容。 We need the 1.9.4
version. 我们需要1.9.4
版本。 We then also need the pre 1.1.0
version of colvis
. 然后我们还需要1.1.0
版本的colvis
。 Unfortunately this referred to an old version of jQuery that issued a call to jQuery.browser
. 不幸的是,这引用了一个旧版本的jQuery,它发出了对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
. 因此需要删除对jQuery.browser
引用,它发生在第856行到第859行.sDom属性也有点棘手,它不会出现在新的data.table中被dom
替换。 Documentation is at http://legacy.datatables.net/usage/options#sDom . 文档位于http://legacy.datatables.net/usage/options#sDom 。 We add the colVis content to a class="cvclear"
using this snippet <"cvclear"C>
. 我们使用此片段<"cvclear"C>
将colVis内容添加到class="cvclear"
。 Placing it at the top is done by ordering it at the start of the sDom
statement. 将它放在顶部是通过在sDom
语句的开头对它进行排序来完成的。 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
. 通常可以通过向类添加align = "right"
来完成,但因为通过sDom
调用启动了类, sDom
我们必须使用HTML5 css text-align:right
。 We add this using tags$style
. 我们使用tags$style
添加它。
So the above should allow us to use colVis
with the current shiny. 所以上面应该允许我们使用colVis
与当前闪亮。 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. 当闪亮升级到data.table 1.10.0
我们应该能够使用当前的colVis
插件文件,并且希望不需要修复。
The following works for me: 以下适用于我:
ui.R 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 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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.