DT 中的复选框闪亮

Question

我正在尝试将复选框放入 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") 上看到的，值得仅选择当前页面中的复选框。如何轮询整个表格，而不仅仅是我看到的页面？

谢谢！

Answer 1

如下图所示，datatables库（DT 包用来显示漂亮表格的 javascript 库）只呈现当前页面显示的部分表格（只有 10 个<tr>标签，但表格包含 150行）。

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

而且，DT包默认开启了服务端处理模式（通过?DT::renderDTR或datatables.net/manual/server-side调用查看帮助），这意味着浏览器不仅会收到正在显示的数据。换句话说，如果您启用了 server-side processing mode ，甚至不可能在浏览器中正确计算它们。

但是，存在替代方法：

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

代码

$(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);  }
  )