R数据表行填充大小修改

Posted 2023-03-24

【中文标题】R数据表行填充大小修改

【英文标题】：R datatable row padding size modification

【发布时间】：2021-03-12 04:35:28

【问题描述】：

我有一个小的 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)

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

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

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

它不起作用...

【参考方案1】：

编辑

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

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

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

DT::datatable() 有一个 options 参数，对应于 DataTables 中的 Options。 options 采用 DataTables Options 中的命名参数列表。

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

DataTables 有一些default styling options，包括一个叫compact。以下是启用 compact 样式选项的作用（引用自 here）：

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

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

重要的js部分是：

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

$(...) 是 jQuery's 语法，用于访问 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 样式仍然适用。

【讨论】：

优雅的例子展示了以这种方式注入 JS 的威力！

有问题。现在查看应用程序，其中 DT 具有多个页面。如果您更改页面，则格式将消失。 kormir.shinyapps.io/dt_test

这是一个很好的解决方案！谢谢。