如何让分页正确显示？

Question

目前数据表的分页显示为两行。正如您在这里看到的：

我希望它在一行上，因为它看起来有点乱。我一直不知道如何做到这一点。

这是我的代码：

library(shiny)
library(ggplot2)
library(DT)

# Define UI
ui <- library(shiny)
library(ggplot2)
library(DT)

# Define UI
ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      .container-fluid {
        width: 100% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
      }
      .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
      .dataTables_wrapper .dataTables_paginate .paginate_button.next {
        margin-top: 0px !important;
      }
      .dataTables_wrapper .dataTables_paginate .paginate_button {
        margin-left: 5px !important;
      }
    "))
  ),
  sidebarLayout(
    sidebarPanel(
      selectInput("variable", "Select Variable:", choices = c("setosa", "versicolor", "virginica"), selected = "A"),
      sliderInput("range", "Select Range:", min = 4.3, max = 7.9, value = c(4.3, 7.9))
    ),
    mainPanel(
      fluidRow(
        column(width = 8, plotOutput("barplot", height = "300px")),
        column(width = 4, DTOutput("table"))
      )
    )
  )
)

# Define server
server <- function(input, output) {
  
  # Generate input data based on user selections
  input_data <- reactive({
    iris[iris$Species == input$variable & iris$Sepal.Length >= input$range[1] & iris$Sepal.Length <= input$range[2], ]
  })
  
  # Render bar plot
  output$barplot <- renderPlot({
    ggplot(input_data(), aes(x = Species, fill = Species)) +
      geom_bar() +
      labs(title = "Bar Plot")
  })
  
  # Render table
  output$table <- renderDT({
    datatable(input_data(), options = list(pageLength = 5))
  })
}

# Run the app
shinyApp(ui, server)

有人知道如何做到这一点吗？我尝试过更改 CSS，但我认为我做错了。

Answer 1

这看起来与通常的设计类似。关键是

white-space: nowrap;

代表

.dataTables_paginate

。

.container-fluid {
  padding-left: 0px !important;
}
.dataTables_paginate {
  white-space: nowrap;
}
.dataTables_wrapper .dataTables_paginate {
  float: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  margin-left: 0px !important;
}