R DataTable lucidi comportamento ColVis

Question

ho ricevuto una pagina di server RStudio lucido con DataTable, e ho avuto TableTools e ColReorder lavorare nell'esempio che segue, ma ColVis (Show/hide columns pulsante) non si comporta nello stesso modo come l'esempio in http://datatables.net/extensions/colvis/:

Quando si fa clic sul pulsante Show/hide columns, l'elenco si mescola con i valori nella tabella sottostante e non riesco a far scomparire l'elenco facendo nuovamente clic sul pulsante o facendo clic in qualsiasi altro punto della pagina (di nuovo, l'esempio nella pagina dei datatables si comporta correttamente).

Inoltre, sono confuso su come utilizzare sDom per ordinare i diversi elementi nella tabella. Vorrei che il pulsante Show/hide columns fosse in alto a destra anziché in alto a sinistra. Inoltre, non sono sicuro di come ordinare i diversi elementi nello sDom della tabella in modo che dopo aver modificato l'ordine delle colonne, salvando in CSV/Excel o nascondendo alcune colonne mi verrà fornito il nuovo layout di tabella anziché quello originale.

Qualche idea?

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

#

Inoltre, c'è un problema con la colonna di ordinamento e la colonna di riordino: se uno sorta quindi riordina le colonne e le specie di nuovo , le intestazioni delle colonne sono capovolte. Ad esempio, ordina per profondità di colonna, quindi sposta la colonna uno a sinistra, quindi fai di nuovo clic sull'intestazione per ordinare, ora abbiamo la profondità dell'intestazione con il contenuto della colonna sbagliata. Vedere snapshot:

Answer 1

Alcune note:

L'attuale versione non è compatibile con data.table atm lucido. Abbiamo bisogno della versione 1.9.4. Abbiamo quindi anche bisogno della versione 1.1.0 pre colvis. Sfortunatamente ciò si riferiva a una vecchia versione di jQuery che emetteva una chiamata a jQuery.browser. Quindi il riferimento a questo jQuery.browser deve essere rimosso si verifica nella riga 856 a 859. L'attributo sDom è anche un po 'difficile non appare nella nuova data.table viene sostituito da dom. La documentazione è http://legacy.datatables.net/usage/options#sDom. Aggiungiamo il contenuto di colVis a class="cvclear" utilizzando questo snippet <"cvclear"C>. La sua collocazione in alto viene eseguita ordinandola all'inizio della dichiarazione sDom. Questo funziona, tuttavia, dobbiamo allineare correttamente. Normalmente ciò avverrebbe aggiungendo align = "right" alla classe, ma poiché la classe viene avviata attraverso la chiamata sDom, dobbiamo invece utilizzare il css HTML5 text-align:right. Aggiungiamo questo utilizzando tags$style.

Quindi quanto sopra dovrebbe consentirci di utilizzare colVis con lo splendente attuale. Quando aggiornamenti brillanti su data.table 1.10.0 dovremmo essere in grado di utilizzare gli attuali file plugin colVis e le correzioni spero che non sia necessario.

le seguenti opere per 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") 
     ) 
    ) 
    ) 
) 
) 
} 
) 

È possibile visualizzare l'applicazione in:

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