DT 中的复选框闪亮

Posted 2023-02-14

【中文标题】DT 中的复选框闪亮

【英文标题】：Checkboxes in DT shiny

【发布时间】：2018-09-07 16:36:36

【问题描述】：

我正在尝试将复选框添加到 DT 表中并收集有关已检查行的信息。 下面是我的代码

shinyApp(
  ui = fluidPage(
    fluidRow(
      verbatimTextOutput("value1"),
      column(12,
             DT::dataTableOutput('table'),  tags$script(html('$(document).on("click", "input", function () 
                       var checkboxes = document.getElementsByName("selected");
                       var checkboxesChecked = [];
                       for (var i=0; i<checkboxes.length; i++) 
                       if (checkboxes[i].checked) 
                       checkboxesChecked.push(checkboxes[i].value);
                      
                      
                     Shiny.onInputChange("checked_rows",checkboxesChecked);  )'))
      ))),
  server = function(input, output) 
    library(DT)
    library(glue)
    output$value1 <- renderPrint( input$checked_rows ) 

    output$table <- DT::renderDataTable(
      iris$checked<-''
      iris$checked[2:5]<-'checked=\"checked\"'
      iris[["Select"]]<-glue::glue('<input type="checkbox" name="selected" iris$checked value="1:nrow(iris)"><br>')
      datatable(iris,escape=F,rownames=F,  class = 'cell-border compact', 
                options=list(ordering=T,autowidth=F,scrollX = TRUE,
                columnDefs = list(list(className = 'dt-center', targets = "_all"))
                ),
                selection="none"
      ) ))

看起来不错，但是： 1.当我在复选框中进行选择并更改页面时，上一页的所有数据都消失了。 2. 此外，正如您在 verbatimTextOutput ("value1") 中看到的，值得只选择当前页面中的复选框。如何轮询整个表格，而不仅仅是我看到的页面？

谢谢！

【参考方案1】：

从下图中可以看出，datatables 库（DT 包用来显示漂亮表格的 javascript 库）只渲染当前页面显示的表格的一部分（只有 10 个@ 987654327@ 标记，但表包含 150 行）。

这就是您的脚本无法正确计数的原因因为 DOM 中只有表格的一部分。

此外，DT 包默认启用服务器端进程模式（通过在 R 中调用 ?DT::renderDT 或 datatables.net/manual/server-side 来查看帮助），这意味着浏览器不仅会收到正在显示的数据。 也就是说，如果启用了服务器端处理模式，甚至无法在浏览器中正确计算它们。

但是，还有其他方法存在：

使用参数selection = "multiple"：虽然它没有给你一个复选框，但它基本上是你需要的； 如果您确实需要一个复选框，您可能会发现 rstudio/DT#93comment 或 shinyapps/DT-radio 很有帮助； 或者您可以禁用服务器处理模式并编写一个侦听器以在单击复选框时更改表数据。像下面这样计算。

代码

$(document).on("click", "input", function () 
      var data = table.data();
      var res = [];
      var elem;
      for (var i=0; i < data.length; i++) 
        elem = $.parseHTML(data[i][6])[0];
        if (elem.checked) 
          res.push(elem.value);
        
      
      Shiny.onInputChange("checked_rows", res);  
  )