Shiny DT：如何手动输入页码？

Question

我有一张100多页的长桌。我需要添加一些功能，以便用户可以键入页数（例如 50）并轻松转到此页面。当需要打开某个位于间隔中间的页面时，这个问题会出现在非常长的表格中。在这种情况下，用户必须多次单击“上一个”或“下一个”按钮。

在下面的示例中，我无法单击第 8 页。

if (interactive()) {
  library(shiny)
  library(DT)
  shinyApp(
    ui = fluidPage(fluidRow(column(12, DTOutput('tbl')))),
    server = function(input, output) {
      output$tbl = renderDT(
        iris, options = list(lengthChange = FALSE)
      )
    }
  )
}

Answer 1

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(
    fluidRow(
      div(style = "display:inline-block;", 
          numericInput("page", "Go to page:", value = 1, min = 1)),
      div(style = "display:inline-block;", 
          actionButton("gotopage", "Go"))
    ),
    fluidRow(
      column(12, DTOutput('tbl'))
    )
  ),
  server = function(input, output) {
    output$tbl = renderDT({
      datatable(
        iris, 
        callback = JS(c(
          "$('#gotopage').on('click', function(){",
          "  var page = parseInt($('#page').val())-1;",
          "  table.page(page).draw('page');",
          "});"
        ))
      )
    })
  }
)

---

另一种选择：

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(
    tags$head(tags$style(".pagination {float: right;}")),
    fluidRow(
      div(id="pagination", 
          div(style = "display:inline-block;", 
              tags$a(id = "first", style = "cursor: pointer;", "First")),
          div(style = "display:inline-block;", 
              tags$a(id = "previous", style = "cursor: pointer;", " Previous")),
          div(style = "display:inline-block;", 
              tags$input(id="page", type="number", class="input-sm", value="1", min="1")
          ),
          div(style = "display:inline-block;", 
              tags$span(id = "of")),
          div(style = "display:inline-block;", 
              tags$a(id = "next", style = "cursor: pointer;", "Next ")),
          div(style = "display:inline-block;", 
              tags$a(id = "last", style = "cursor: pointer;", "Last"))
      )
    ),
    fluidRow(
      column(12, DTOutput('tbl'))
    )
  ),
  server = function(input, output) {
    output$tbl = renderDT({
      datatable(
        iris, options = list(
          dom = "lfrti<'pagination'>", 
          initComplete = JS(c(
            "function(settings, json){",
            "  var table = settings.oInstance.api();",
            "  var pageinfo = table.page.info();",
            "  $('#of').text('of ' + pageinfo.pages);",
            "}"
          ))
        ),
        callback = JS(c(
          "$('div.pagination').append($('#pagination'));",
          "$('#first').on('click', function(){", 
          "  table.page('first').draw('page');",
          "  $('#page').val(1);",
          "});",
          "$('#previous').on('click', function(){", 
          "  table.page('previous').draw('page');",
          "  $('#page').val(table.page.info().page + 1);",
          "});",
          "$('#next').on('click', function(){", 
          "  table.page('next').draw('page');",
          "  $('#page').val(table.page.info().page + 1);",
          "});",
          "$('#last').on('click', function(){", 
          "  table.page('last').draw('page');",
          "  $('#page').val(table.page.info().pages);",
          "});",
          "$('#page').on('change', function(){",
          "  var page = parseInt($('#page').val());",
          "  if(!isNaN(page)){ table.page(page-1).draw('page'); }",
          "});"
        ))
      )
    })
  }
)

Answer 2

我想分享我自己的经验，试图找到

pagingType: "input"

的 DT 实现，如 https://jsfiddle.net/qammar/ad4t12r8/2/

所示

幸运的是，在这个官网浏览时，他们解释了如何使用插件。原来有一些插件可用于 DT 接口，一个是

pagingType: "input"

选项。

按照他们网站上给出的例子，我可以在我的项目中实现它，如下所示：

DT::datatable(
 plugins = "input",
 options = list(
   pagingType = "input"
   )
 )

你可以看到我当前应用程序的解决方案（抱歉质量差）是：

下面的代码显示了一个通用示例：

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(
    fluidRow(
      column(12, DTOutput('tbl'))
    )
  ),
  server = function(input, output) {
    output$tbl = renderDT({
      datatable(
        iris,
        plugins = "input",
        options = list(
          pagingType = "input"
        )
      )
    })
  }
)

然而，最佳答案是纯粹的破解！ 💪