R shiny DataTables поведение ColVis

У меня есть страница сервера RStudio Shiny с DataTables, а в приведенном ниже примере работают TableTools и ColReorder, но ColVis (кнопка Show/hide columns) ведет себя не так, как в примере в http://datatables.net/extensions/colvis/:

При нажатии кнопки Show/hide columns список смешивается со значениями в таблице внизу, и я не могу заставить список исчезнуть, нажав кнопку еще раз или щелкнув где-нибудь еще на странице (опять же, пример на странице таблиц данных ведет себя правильно).

введите описание изображения здесь

Кроме того, меня смущает использование sDom для упорядочивания различных элементов в таблице. Я бы хотел, чтобы кнопка Show/hide columns была вверху справа, а не вверху слева. Я также не уверен, как упорядочить различные элементы в sDom таблицы, чтобы после изменения порядка столбцов, сохранения в CSV / Excel или скрытия некоторого столбца я получил новый макет таблицы вместо исходного.

Любые идеи?

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

Кроме того, существует проблема с сортировкой столбцов и переупорядочиванием столбцов: если сортировать, затем переупорядочивать столбцы и снова сортировать, заголовки столбцов переворачиваются. Например, отсортируйте по глубине столбца, затем сдвиньте первый столбец влево, затем снова щелкните заголовок, чтобы отсортировать, теперь мы получили глубину заголовка с содержимым из неправильного столбца. См. Снимок:

введите описание изображения здесь


person 719016    schedule 08.07.2014    source источник
comment
Для этой библиотеки вам понадобится только опция sDom. Тогда виджет должен отображаться правильно. Однако виджет изменяет объекты в DOM, поэтому вам, вероятно, потребуется включить вызовы Shiny.unbindAll() и Shiny.bindAll(), см. groups.google.com/forum / #! msg / shiny-Discussion / IE6aQfKXd1I /   -  person jdharrison    schedule 08.07.2014
comment
где должны выполняться эти Shiny.unbindAll() и Shiny.bindAll() вызовы относительно таблицы?   -  person 719016    schedule 09.07.2014


Ответы (1)


Некоторые примечания:

Текущая версия data.table несовместима с блестящим банкоматом. Нам нужна 1.9.4 версия. Затем нам также понадобится предварительная 1.1.0 версия colvis. К сожалению, это относилось к старой версии jQuery, которая вызвала jQuery.browser. Поэтому ссылку на этот jQuery.browser необходимо удалить, оно встречается в строках с 856 по 859. Атрибут sDom также немного сложен, он не отображается в новой таблице data.table, замененной на dom. Документация находится по адресу http://legacy.datatables.net/usage/options#sDom. Мы добавляем содержимое colVis в class="cvclear", используя этот фрагмент <"cvclear"C>. Размещение его вверху осуществляется путем его упорядочивания в начале оператора sDom. Это работает, однако нам нужно выровнять его по правому краю. Обычно это делается путем добавления align = "right" к классу, но поскольку класс инициируется вызовом sDom, мы вместо этого должны использовать HTML5 css text-align:right. Мы добавляем это с помощью tags$style.

Таким образом, приведенное выше должно позволить нам использовать colVis с текущим сиянием. После блестящего обновления до data.table 1.10.0 мы сможем использовать текущие colVis файлы подключаемых модулей, и мы надеемся, что исправления не понадобятся.

У меня работает следующее:

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

Вы можете просмотреть приложение по адресу:

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

введите описание изображения здесь

person jdharrison    schedule 13.07.2014
comment
У меня сейчас он в основном работает, за исключением того, что если сортировать, а затем переупорядочивать столбцы и снова сортировать, заголовки столбцов переворачиваются. Например, отсортируйте по столбцу depth, затем сдвиньте первый столбец влево, затем снова щелкните заголовок для сортировки, теперь мы получили заголовок depth с содержимым из неправильного столбца ... (снимок в вопросе) - person 719016; 13.07.2014
comment
Ошибка в ColReorder и сортировке все еще существует, но я думаю, что это, вероятно, связано с этим вопросом, поэтому я собираюсь пометить этот ответ как принятый :-) - person 719016; 16.07.2014