闪亮的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)
      )
    }
  )
}

- iomedee

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'); }",
          "});"
        ))
      )
    })
  }
)

- Stéphane Laurent

---

我喜欢你的解决方案。我希望在DT中有一些内部选项，可以在分页控件中输入页面编号。我查看了官方文档，但仍然没有找到任何信息 https://datatables.net/examples/basic_init/alt_pagination.html - iomedee

@iomedee 我认为有一个插件可以做到这一点（分页输入），但目前它不能与 Datatables 1.10.x一起使用。 在此处演示：https://jsfiddle.net/qammar/ad4t12r8/2/ - Stéphane Laurent

@iomedee 请看我的修改。这个方法替换了分页控件。 - Stéphane Laurent

你很棒！ - iomedee

Answer 2

我想分享一下自己尝试寻找DT实现pagingType: "input"的经验，就像https://jsfiddle.net/qammar/ad4t12r8/2/中所演示的那样。

幸运的是，在官方网站浏览时，他们解释了如何使用插件。原来在DT界面上有一些可用的插件，其中之一就是pagingType: "input"选项。

按照他们网站上给出的例子，我成功地将其实现到我的项目中，如下所示：

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

您可以查看我当前应用程序的解决方案（抱歉质量不佳），链接如下：https://istack.dev59.com/3PEUL.gif

以下代码展示了一个通用示例：

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"
        )
      )
    })
  }
)

然而，最佳答案纯属扯淡！

- Isaangjim