DT 默认折叠所有行组答案

【问题标题】：DT collapse all row groups by defaultDT 默认折叠所有行组
【发布时间】：2021-06-19 23:57:38
【问题描述】：

我试图让数据表中的所有行组默认折叠，

我目前的实现：

library(shiny)
library(DT)
ui <- fluidPage(# Application title
  titlePanel("Collapse/Expand table"),
  mainPanel(DTOutput("my_table")))

callback_js <- JS(
  "table.on('click', 'tr.dtrg-group', function () {",
  "  var rowsCollapse = $(this).nextUntil('.dtrg-group');",
  "  $(rowsCollapse).toggleClass('hidden');",
  "});"
)

server <- function(input, output) {
  output$my_table <- DT::renderDT({
    datatable(
      mtcars[1:15, 1:5],
      extensions = 'RowGroup',
      options = list(rowGroup = list(dataSrc = 3), pageLength = 20),
      callback = callback_js,
      selection = 'none'
    )
  })
}

# Run the application
shinyApp(ui = ui, server = server)

结果：

我想要的输出：

所有行组应在初始时折叠（在第一个时间表呈现时），我找不到任何解决方案存在

更新（2021 年 3 月 24 日）：

感谢@thothal，现在表格在初始化时折叠，但如果不同选项卡上有多个 DT，则在来回导航时第一个表格会意外展开

要重现的代码：

library(shiny)
library(DT)
ui <- fluidPage(# Application title
  titlePanel("Collapse/Expand table"),
  mainPanel(
    tabsetPanel(
      tabPanel("table1", dataTableOutput("my_table")),
      tabPanel("table2", dataTableOutput("my_table2"))
    )
  ))

callback_js <- JS(
  "table.on('click', 'tr.dtrg-group', function () {",
  "  var rowsCollapse = $(this).nextUntil('.dtrg-group');",
  "  $(rowsCollapse).toggleClass('hidden');",
  "});",
  "table.on('init', () => $('.dtrg-group').trigger('click'))"
)

server <- function(input, output) {
  output$my_table <- DT::renderDataTable({
    datatable(
      mtcars[1:15, 1:5],
      extensions = 'RowGroup',
      options = list(rowGroup = list(dataSrc = 3), pageLength = 20),
      callback = callback_js,
      selection = 'none'
    )
  })
  
  output$my_table2 <- DT::renderDataTable({
    datatable(
      mtcars[1:15, 1:5],
      extensions = 'RowGroup',
      options = list(rowGroup = list(dataSrc = 3), pageLength = 20),
      callback = callback_js,
      selection = 'none'
    )
  })
}

# Run the application
shinyApp(ui = ui, server = server)

【问题讨论】：

datatables.net/extensions/rowgroup 最后说：“没有展开/折叠组的选项”
@PatrickBormann 是的，但我希望一些 JS 专家可以在这里教我

标签： r shiny datatables dt

【解决方案1】：

如下调整您的callback：

callback_js <- JS(
   "table.on('click', 'tr.dtrg-group', function () {",
   "  var rowsCollapse = $(this).nextUntil('.dtrg-group');",
   "  $(rowsCollapse).toggleClass('hidden');",
   "});",
   "table.on('init', () => $('.dtrg-group').trigger('click'))"
)

一旦设置好表格，这将触发所有点击事件。

【讨论】：

感谢您的回答，但它仅适用于 1 个单个 DT，适用于多个 DT，其他 DT 仍会无意中扩展，我已更新帖子
这是因为对第一个表触发了两次行的点击事件。您有几个选择：调整您的目标，使其仅针对相关表的行，直接运行折叠代码，即不使用触发器（执行切换）或找到一个在所有表都触发时触发的事件满载。
@thothal 谢谢。这个答案也对我有帮助，但我有一个小问题。如果第一个行组包含超过 pageLength，则您看不到其他折叠的行组。您必须转到第一组结束的页面。例如，在上面的例子中，行组 160 有 45 行。 pageLength 为 20。在第一页中，您只能看到前 20 个折叠的 160 行。要查看折叠的下一行组（108、258），您必须从第 46 个开始转到第三页在第 3 页的 rowfalls。有什么方法可以让所有行组在第一页中折叠？

【解决方案2】：

我想出了针对多个 DT 的解决方案，我们需要指定哪些表触发 'click' 事件。由于 DT 是惰性渲染，所以当其他 DT 渲染时，它会删除前一个表的隐藏类

代码：

library(shiny)
library(DT)
ui <- fluidPage(# Application title
  titlePanel("Collapse/Expand table"),
  mainPanel(
    tabsetPanel(
      tabPanel("table1", dataTableOutput("my_table")),
      tabPanel("table2", dataTableOutput("my_table2"))
    )
  ))

server <- function(input, output) {
  output$my_table <- DT::renderDataTable({
    datatable(
      mtcars[1:15, 1:5],
      extensions = 'RowGroup',
      options = list(rowGroup = list(dataSrc = 3), pageLength = 20),
      callback = JS(
        "table.on('click', 'tr.dtrg-group', function () {",
        "  var rowsCollapse = $(this).nextUntil('.dtrg-group');",
        "  $(rowsCollapse).toggleClass('hidden');",
        "});",
        "table.one('init', () => $('#my_table .dtrg-group').trigger('click'))"
      ),
      selection = 'none'
    )
  })
  
  output$my_table2 <- DT::renderDataTable({
    datatable(
      mtcars[1:15, 1:5],
      extensions = 'RowGroup',
      options = list(rowGroup = list(dataSrc = 3), pageLength = 20),
      callback = JS(
        "table.on('click', 'tr.dtrg-group', function () {",
        "  var rowsCollapse = $(this).nextUntil('.dtrg-group');",
        "  $(rowsCollapse).toggleClass('hidden');",
        "});",
        "table.one('init', () => $('#my_table2 .dtrg-group').trigger('click'))"
      ),
      selection = 'none'
    )
  })
}

# Run the application
shinyApp(ui = ui, server = server)

【讨论】：