将 DT 搜索框定位到 table 的中心

Question

我很难找出将搜索框从 Shiny 应用程序中的 DT table 定位到中间的代码。我正在使用一个名为 DTedit 的 DT 扩展包来创建我的 table。这是一些示例代码：

library(shiny)
library(DTedit)

##### Create the shiny UI
ui <- fluidPage(
  h3('DTedit Template'),
  uiOutput('mycontacts')
)

##### Create the Shiny server
server <- function(input, output) {
  mydata <- data.frame(name = character(),
                       email = character(),
                       useR = factor(levels = c('Yes', 'No')),
                       notes = character(),
                       stringsAsFactors = FALSE)
  
  ##### Callback functions.
  my.insert.callback <- function(data, row) {
    mydata <- rbind(data, mydata)
    return(mydata)
  }
  my.update.callback <- function(data, olddata, row) {
    mydata <- olddata
    mydata[row, ] <- data[row, ]
    return(mydata)
  }
  my.delete.callback <- function(data, row) {
    mydata <- mydata[-row,]
    return(mydata)
  }
  
  ##### Create the DTedit object
  DTedit::dtedit(input, output,
                 name = 'mycontacts',
                 thedata = mydata,
                 edit.cols = c('name', 'email', 'useR', 'notes'),
                 edit.label.cols = c('Name', 'Email Address', 'Are they an R user?', 'Additional notes'),
                 input.types = c(notes='textAreaInput'),
                 view.cols = c('name', 'email', 'useR'),
                 callback.update = my.update.callback,
                 callback.delete = my.delete.callback,
                 show.insert = FALSE,         
                 show.copy = FALSE)
}

##### Start the shiny app
shinyApp(ui = ui, server = server)

根据谷歌搜索，我发现 CSS 将搜索框居中对齐：

div.dataTables_wrapper  div.dataTables_filter {
  width: 100%;
  float: none;
  text-align: center;
}

但是，我不确定如何将此 CSS 插入 table。 dtedit() 有 datatable.options 参数，所以我想我必须以某种方式使用这个参数。

如有任何帮助，我们将不胜感激！

Answer 1

是的，您找到的 CSS 有效。以下是如何包含它：

css <- "
div.dataTables_wrapper  div.dataTables_filter {
  width: 100%;
  float: none;
  text-align: center;
}
"

ui <- fluidPage(
  tags$head(
    tags$style(HTML(css))
  ),
  ......

该框居中但仅在可用 space 中，因此它不是“全局”居中，因为“显示”项：

如果要删除“显示”项，可以使用选项dom = "frtip"。或者，如果您想保留它但将搜索框全局居中，请改用此 CSS：

css <- "
div.dataTables_wrapper  div.dataTables_filter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
"

将 DT 搜索框定位到 table 的中心

Position DT search box to center of table

html

css

r

shiny

dt