使用 DOM 选项定位 DataTables 元素

Question

我无法在 [=15] 中的 DT::datatable 输出中将 length 更改和 f 过滤输入分别正确定位到右上角和左下角=] 使用 dom 选项。代码：

library(shiny)
library(DT)

set.seed(2282018)
company <- data.frame(Company = letters[1:10], Sales = scales::dollar(runif(10, 200, 1230)), stringsAsFactors = F)

# UI ---- 
ui <- function(){

  fluidPage(

    sidebarLayout(

      sidebarPanel(numericInput("nums", label = "Num Input", value = 1, min = 1, max = 10)),

      mainPanel(dataTableOutput("mytable"))

      )

  )

}

# server ----
server <- function(input, output, session){

  output$mytable <- renderDataTable({
    datatable(company, 
              caption = tags$caption("Whosebug Example"), 
              filter = "none", 
              options = list(
                autoWidth = T, 
                pageLength = 10, 
                scrollCollapse = T, 
                dom = '<"right"l>t<"left"f>')
              )

  })

}

runApp(list(ui = ui, server = server))

如前所述，我的目标是将 l 移到右上角，将 f 移到左下角。

谢谢！

Answer 1

进程

在DataTable DOM positioning reference中有移动元素到top/bottom的例子，但没有left/right。我不确定仅使用 dom 选项是否可以移动元素 left/right。

但是，根据这个 question about moving the search box，您可以分三步移动元素 left/right：

制作CSS类

css <- HTML(".pull-left{float: left !important;} .pull-right{float: right !important;}")
使用 javascript/jQuery 将类添加到您的数据表

js <- HTML("$(function(){ setTimeout(function(){ $('.dataTables_filter').addClass('pull-left'); $('.dataTables_length').addClass('pull-right'); }, 200); });")
将 CSS 和 JS 添加到闪亮应用的 HTML header

fluidPage( tags$head(tags$style(css), tags$script(js)), ...)

完整示例

library(shiny)
library(DT)

set.seed(2282018)
company <- data.frame(Company = letters[1:10], Sales = scales::dollar(runif(10, 200, 1230)), stringsAsFactors = F)

css <- HTML(".pull-left{float: left !important;}
            .pull-right{float: right !important;}")

js <- HTML("$(function(){
        setTimeout(function(){
           $('.dataTables_filter').addClass('pull-left');
           $('.dataTables_length').addClass('pull-right');
           }, 200);
           });")

# UI ---- 
ui <- function(){

        fluidPage(
                tags$head(tags$style(css),
                          tags$script(js)),

                sidebarLayout(

                        sidebarPanel(numericInput("nums", label = "Num Input", value = 1, min = 1, max = 10)),

                        mainPanel(dataTableOutput("mytable"))
                )       
        )
}

# server ----
server <- function(input, output, session){

        output$mytable <- renderDataTable({
                datatable(company, 
                          caption = tags$caption("Whosebug Example"), 
                          filter = "none", 
                          options = list(
                                  autoWidth = T, 
                                  pageLength = 10, 
                                  scrollCollapse = T, 
                                  dom = '<"top"l>t<"bottom"f>')
                )
        })
}
runApp(list(ui = ui, server = server))

使用 DOM 选项定位 DataTables 元素

Positioning DataTables elements with DOM option

r

shiny

datatables-1.10

dt

进程

完整示例