2014-07-08 30 views
8

Mam stronę serwera RStudio Shiny z DataTables i mam TableTools i ColReorder pracuje w poniższym przykładzie, ale ColVis (Show/hide columns przycisk) nie zachowuje się w taki sam sposób, jak przykładowo w http://datatables.net/extensions/colvis/:R błyszczące DataTables zachowanie ColVis

Po kliknięciu przycisku Show/hide columns lista zostanie pomieszana z wartościami w tabeli pod spodem i nie mogę spowodować, że lista zniknie, klikając ponownie przycisk lub klikając w innym miejscu na stronie (ponownie zachowuje się przykład na stronie z danymi; prawidłowo).

enter image description here

Również jestem mylić temat korzystania sDom zamówić różne elementy w tabeli. Chciałbym, aby przycisk Show/hide columns znajdował się w prawym górnym rogu, a nie w lewym górnym rogu. Nie jestem również pewien, jak zamówić różne elementy w tabeli sDom, aby po zmianie kolejności kolumn zapisanie w CSV/Excel lub ukrycie pewnej kolumny da mi nowy układ tabeli zamiast oryginalnego.

Wszelkie pomysły?

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

Ponadto, istnieje problem z kolumny sortowania i kolumny zmienić kolejność: jeśli jeden sortuje wtedy zmieniać kolejność kolumn i sortuje ponownie nagłówki kolumn są odwracane. Na przykład posortuj według głębokości kolumny, następnie przesuń kolumnę 1 w lewo, a następnie kliknij ponownie nagłówek, aby posortować, teraz mamy głębię nagłówka z treścią z niewłaściwej kolumny. Patrz zrzut:

enter image description here

+0

Trzeba opcję 'sDom' tylko dla tej biblioteki . THEN widżet powinien wyświetlać się poprawnie. Jednak widget zmienia obiekty w DOM, więc prawdopodobnie będziesz musiał włączyć wywołania funkcji 'Shiny.unbindAll()' i 'Shiny.bindAll()' zobacz https://groups.google.com/forum/#!msg/shiny- dyskutować/IE6aQfKXd1I/M_IpbLUUG9AJ – jdharrison

+0

gdzie powinny być wykonywane wywołania 'Shiny.unbindAll()' i 'Shiny.bindAll()' względem tabeli? – 719016

Odpowiedz

6

Kilka uwag:

Aktualna wersja data.table jest niezgodna z błyszczącą atm. Potrzebujemy wersji 1.9.4. Następnie potrzebujemy również wersji 1.1.0 z . Niestety dotyczyło to starej wersji jQuery, która wywołała połączenie z jQuery.browser. Dlatego odwołanie do tego jQuery.browser musi zostać usunięte, występuje w linii od 856 do 859. Atrybut sDom jest również nieco skomplikowany, nie pojawia się w nowej tabeli data.table zastąpionej przez dom. Dokumentacja jest pod numerem http://legacy.datatables.net/usage/options#sDom. Dodajemy zawartość colVis do class="cvclear" przy użyciu tego fragmentu kodu <"cvclear"C>. Umieszczenie go na górze odbywa się poprzez zamówienie go na początku instrukcji sDom. Działa to jednak, musimy to wyrównać. Zwykle można to zrobić, dodając do klasy align = "right", ale ponieważ klasa jest inicjowana przez wywołanie sDom, zamiast tego musimy użyć HTML5 css text-align:right. Dodajemy to przy użyciu tags$style.

Tak więc powyższe powinno pozwolić nam używać colVis z aktualnym błyszczącym. Gdy będzie to lśniące uaktualnienie do data.table 1.10.0, powinniśmy móc korzystać z aktualnych plików wtyczek colVis, a poprawki, na szczęście, nie będą konieczne.

następujące prace dla mnie:

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

Można zobaczyć aplikację pod adresem:

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

enter image description here

+0

Mam go głównie działa teraz, chyba że jeden sortuje następnie zmienia kolejność kolumn i sortuje ponownie, nagłówki kolumn są odwrócone. Na przykład posortuj według kolumny 'depth', a następnie przesuń kolumnę 1 w lewo, a następnie kliknij ponownie nagłówek, aby posortować, teraz otrzymaliśmy nagłówek' depth' z treścią z niewłaściwej kolumny ... (migawka w pytaniu) – 719016

+0

błąd w ColReorder i sortowanie wciąż tam jest, ale myślę, że jest to prawdopodobnie związane z tym pytaniem, więc zamierzam nazwać tę odpowiedź jako zaakceptowaną :-) – 719016

Powiązane problemy