Как применить тему bootstrap к кнопкам в таблице DT - PullRequest
Новая
       82

Как применить тему bootstrap к кнопкам в таблице DT

0 голосов
/ 14 июля 2020

У меня есть блестящее приложение, которое представляет данные в виде DT-таблицы. Я использую расширение «Кнопки», чтобы включить кнопки «Выбрать все» и «Отменить выбор», а также shinythemes, чтобы применить тему bootstrap. Я назначаю класс двум DT-кнопкам, чтобы отформатировать их так же, как и все остальные кнопки в приложении. Однако при этом изменяется только шрифт, а не цвет кнопок.

Ниже приведен снимок экрана с минимальным рабочим примером приложения, включая кнопку обычного действия, которая правильно отформатирована, и две DT-кнопки, которые не правильно отформатирован. Обратите внимание, что я назначил класс "btn btn-primary" только для «Выбрать все», чтобы показать, что шрифт действительно изменился вследствие назначения класса.

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

И это код, который создает приложение: 

library(shiny)
library(DT)

ui <- fluidPage(
  theme = shinythemes::shinytheme("lumen"),
  actionButton("button", "Click", class = "btn btn-primary"),
  dataTableOutput("table")
)

server <- function(input, output, session) {
  output$table <- renderDT(
    datatable(mtcars,
              extensions = c("Select", "Buttons"),
              selection = "none",
              options = list(
                dom = "Bfti",
                select = list(style = "multi"),
                buttons = list(
                  list(extend = "selectAll", className = "btn btn-primary"),
                  list(extend = "selectNone")
                )
              )
    ),
    server = FALSE
  )
}

shinyApp(ui, server)

Как я могу отформатировать кнопки «Выбрать все» и «Отменить все» так же, как и « Нажмите кнопку?

Я, конечно, знаю, что могу просто создать две обычные кнопки действий, которые выполняют одни и те же действия. Однако они размещаются над столом и поэтому занимают больше места по вертикали, что мне не нужно.

1 Ответ

2 голосов
/ 15 июля 2020 
  output$table <- renderDT(
    datatable(mtcars,
              extensions = c("Select", "Buttons"),
              selection = "none",
              options = list(
                dom = "Bfti",
                select = list(style = "multi"),
                buttons = list(
                  list(
                    extend = "selectAll", 
                    className = "btn btn-primary"
                  ),
                  list(
                    extend = "selectNone",
                    className = "btn btn-primary"
                  )
                ),
                initComplete = JS("function(){$('.dt-buttons button').removeClass('dt-button');}")
              )
    ),
    server = FALSE
  )
...