【问题标题】:R Shiny DT responsive datatable heightR Shiny DT 响应式数据表高度
【发布时间】:2019-12-19 18:00:52
【问题描述】:

我正在尝试在 Shiny 中创建一个全高数据表,该数据表根据可用高度显示多行,并且页数也会发生变化。

DT responsive 扩展名用于宽度。是否可以有一个等价的高度?

答案可能是使用 javascript 将 show N entries 顶部的框修改为新的 N 值,并在知道行大小的情况下计算表格可以占用的最大空间。

这是一个开始:

library(shiny)

ui <- fluidPage(

    titlePanel("Arbitrary component to remove space in the page"),

    dataTableOutput('table_name')
)

server <- function(input, output) {
    output$table_name <- DT::renderDataTable({
        data.frame(a=1:100, b = 100:1, c = 101:200)
    })
}

shinyApp(ui = ui, server = server)

任何帮助将不胜感激

【问题讨论】:

    标签: r datatable shiny responsive dt


    【解决方案1】:

    下面是一个基本示例,说明如何根据窗口的高度更改表格中的行数。这不是最有效的方法,但可以帮助您创建更好的解决方案。

    请注意,调整表格的延迟应根据您的需要进行调整。

    jscode.autoHeightDT <- '
      autoHeightDT = function() {
        var offset = 100; // pixels used for other elements like title, buttons, etc
    
        // compute the number of rows to show in window
        var n = Math.floor(($(window).height() - offset) / $("#table_name tr").height());
    
        // set the new number of rows in table
        t = $("#table_name .dataTable").DataTable().page.len(n).draw();
      }
    
      // to adjust the height when the app starts, it will wait 0.8 seconds
      setTimeout(autoHeightDT, 800);
    
      // to react to changes in height of window 
      $(window).resize(function() {
        autoHeightDT();
      });
    
    '
    
    library(shiny)
    library(DT)
    
    ui <- fluidPage(
        tags$script(jscode.autoHeightDT), # includes JavaScript code
        titlePanel("Arbitrary component to remove space in the page"),
    
        dataTableOutput('table_name')
    )
    
    server <- function(input, output) {
        output$table_name <- DT::renderDataTable({
            data.frame(a=1:100, b = 100:1, c = 101:200)
        })
    }
    
    shinyApp(ui = ui, server = server)
    

    【讨论】:

    • 请注意,show N entries 按钮是空的,这不是问题。我会等待接受您的回答,因为可能有更好的解决方案,但是这个已经非常接近我需要的了。非常感谢您的宝贵时间。
    • 我编辑了偏移变量的代码。谢谢。
    猜你喜欢
    • 2018-07-02
    • 2021-12-13
    • 2015-06-29
    • 2021-11-20
    • 1970-01-01
    • 2018-11-01
    • 1970-01-01
    • 2020-10-28
    • 1970-01-01
    相关资源
    最近更新 更多