使用DOM选项定位DataTables元素 [英] Positioning DataTables elements with DOM option

问题描述

我无法正确地将 l 更改的长度和 f 的输入放置在右上角，使用 dom在 shiny 的 DT :: datatable 输出中分别在左下方code>选项。代码：

I can't correctly position the length changing and the filtering input to the top-right and bottom-left respectively on my DT::datatable output in shiny using the dom option. Code:

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("StackOverflow 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 左下角。

As stated before, my goal is to move l to the top right and f to the bottom left.

谢谢！

推荐答案

处理

在 DataTable DOM定位参考中，有一些示例将元素移动到顶部/底部，而不是左/右。我不确定仅使用 dom 选项是否可以左右移动元素。

Process

In the DataTable DOM positioning reference, there are examples of moving elements to top/bottom, but not left/right. I'm not sure if moving elements left/right is possible using just the dom option.

但是，每此有关移动的问题搜索框，您可以通过三个步骤左右移动元素：

However, per this question about moving the search box, you can move the elements left/right in three steps:

1. 制作CSS类

1. Make CSS classes

css<-HTML（。pull-left {float：left！important;}
.pull-right {float：right ！important;}）

使用javascript / jQuery将类添加到数据表中

Use javascript/jQuery to add the classes to your datatable

js<-HTML（ $（function（）{
setTimeout（function（）{
$（'。dataTables_filter'）。addClass（ 'pull-left'）;
$（'。dataTables_length'）。addClass（'pull-right'）;
}，200）;
}）;）

将CSS和JS添加到闪亮应用的HTML标头中

Add the CSS and JS to the HTML header of your shiny app

fluidPag e（
标签$ head（标签$ style（css），
标签$ 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("StackOverflow 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元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！