css - R数据表行填充大小修改

Question

我有一个小的 R 闪亮应用 https://kormir.shinyapps.io/dt_test/

library(shiny)
library(DT)

ui <- fluidPage(
            column(4,
                   br(),
                   br(),
                   dataTableOutput('dt1')
                   )
)

server <- function(input, output) {
    output$dt1 <- renderDataTable({
        datatable(mtcars[1:4,1:4])
    })
}

shinyApp(ui = ui, server = server)

在使用 datatable 包创建动态表。我想减少内部填充，但通过 css 技能还不够好。

我需要删除那个黄色区域或使它非常非常小。例如，我找出了行的类别并试图将这些填充的大小强制为 0。

 .odd {
    background-color: red!important;
    border-collapse: collapse!important;
    padding: 0!important;
    border : 0px !important;
} 

这没用...

标签： cssrshinydatatableshinyjs

Answer 1

编辑

我最初的解决方案没有考虑到会话期间对表格的交互式更改。DataTables 初始化时的以下 js 注入function(){$('tbody td').css({'padding': '0px'});}将填充更改应用于表格的初始状态，但任何更改（例如排序和分页）都会导致表格恢复到其初始显示设置。

initComplete在 DataTables 初始化时使用in 参数注入一些 javascript 怎么样Options？

为此，您必须htmlwidgets安装软件包才能使用该JS()功能。JS()将字符串视为 javascript 代码。

DT::datatable()有一个options对应Options于 DataTables 的参数。options接受 . 中的命名参数列表DataTables Options。

在options中，提供带有initComplete参数的命名列表。在那里，注入一些 js，htmlwidgets::JS()js 回调将在 DataTables 初始化时执行。

DataTables 有一些默认样式选项，包括一个名为compact. 以下是启用compact样式选项的作用（引用自此处）：

减少 DataTable 的默认样式使用的空白数量，增加屏幕上的信息密度

好的，下一步是将类添加compact到 DOM 中的 DataTables 对象，如下所示：

重要的js部分是：

function(){$(this).addClass('compact');}

$(...)是jQuery访问 DOM 中元素的语法。里面$(...)是你想要选择的 DOM 元素的选择器。幸运的是，因为您是在 DataTables 事件中注入此 js 代码，所以您可以使用this选择器来引用表格。下一个方法是addClass()。它按照它所说的做：它向 DOM 中的选定对象添加一个类。您想将该类添加compact到您的表中，然后 DataTables 将处理其余部分。

好的，代码如下：

library(shiny)
library(DT)

ui <- fluidPage(
  column(4,
         br(),
         br(),
         dataTableOutput('dt1')
  )
)

server <- function(input, output) {
  output$dt1 <- renderDataTable({
    datatable(mtcars, 
              options = list(
                initComplete = JS(
                  "function(){$(this).addClass('compact');}")
              )
    )
  })
}

shinyApp(ui = ui, server = server, options = list(launch.browser=TRUE))

结果：

更改分页并按以下方式排序后cyl：

compact样式仍然适用。