R shiny comportamiento de DataTables ColVis

Obtuve una página de servidor RStudio Shiny con DataTables, y conseguí que TableTools y ColReorder funcionaran en el siguiente ejemplo, pero ColVis (botón Show/hide columns ) no se comporta de la misma manera que el ejemplo en http://datatables.net/ extensiones / colvis / :

Al hacer clic en el botón Show/hide columns , la lista se mezcla con los valores en la tabla de abajo, y no puedo hacer que la lista desaparezca haciendo clic nuevamente en el botón o haciendo clic en cualquier otro lugar de la página (nuevamente, el ejemplo en la página de datos se comporta) correctamente).

introduzca la descripción de la imagen aquí

Además, estoy confundido acerca del uso de sDom para ordenar los diferentes elementos de la tabla. Me gustaría que el botón Show/hide columns esté en la parte superior derecha en lugar de arriba a la izquierda. Tampoco estoy seguro de cómo ordenar los diferentes elementos en el sDom de la tabla para que después de cambiar el orden de las columnas, guardar en CSV / Excel u ocultar alguna columna me dé el nuevo diseño de la tabla en lugar del original.

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

servidor.R

 shinyServer(function(input, output, session) { output$mytable = renderDataTable({ diamonds[,1:6] }, options = list( "sDom" = 'RMDCTlfrtip', "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") ) ) ) ) ) }) 

#

Además, hay un problema con la clasificación de columnas y el nuevo orden de las columnas: si uno ordena, vuelve a ordenar las columnas y las clasifica de nuevo, los encabezados de las columnas se voltean. Por ejemplo, ordene por profundidad de columna, luego desplace la columna uno hacia la izquierda, luego haga clic en el encabezado nuevamente para ordenar, ahora obtuvimos la profundidad del encabezado con el contenido de la columna incorrecta. Vea la instantánea:

introduzca la descripción de la imagen aquí

Algunas notas:

La versión actual de data.table es incompatible con la atm shiny. Necesitamos la versión 1.9.4 . Entonces también necesitamos la versión pre 1.1.0 de colvis . Desafortunadamente, esto se refería a una versión antigua de jQuery que emitió una llamada a jQuery.browser . Por lo tanto, la referencia a este jQuery.browser debe eliminarse, se produce en las líneas 856 a 859. El atributo sDom también es un poco complicado, no aparece en la nueva tabla de datos que está siendo reemplazada por dom . La documentación se encuentra en http://legacy.datatables.net/usage/options#sDom . Agregamos el contenido de colVis a una class="cvclear" usando este fragmento <"cvclear"C> . Colocarlo en la parte superior se realiza ordenándolo al inicio de la instrucción sDom . Esto funciona, sin embargo, necesitamos alinearlo correctamente. Normalmente, esto se haría agregando align = "right" a la clase, pero debido a que la clase se inicia a través de la llamada sDom , en su lugar tenemos que usar HTML5 css text-align:right . Añadimos esto usando tags$style .

Así que lo anterior debería permitirnos usar colVis con el brillo actual. Cuando el brillo se actualice a data.table 1.10.0 , deberíamos poder utilizar los archivos de complemento de colVis actuales y, con suerte, los arreglos no serán necesarios.

Los siguientes trabajos para mí:

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

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

Puedes ver la aplicación en:

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

introduzca la descripción de la imagen aquí

    Intereting Posts