javascript - 使用回调选项选择新页面后，R DT 数据表不保留行索引/计数器列

Question

我正在使用 this question作为向 Shiny 应用程序中的 DT::datatable 添加“行索引”或“计数器列”(如数据表文档 here 中所述)的引用。目的是使表中的行名称保持不变(1、2、3 ...)，而不管应用于表的排序如何。

用户 NicE 通过转换数据表文档中的 javascript 代码以用于 DT::datatable 选项的回调来回答这个问题:

output$tbl = renderDataTable({
                        datatable(data, filter = "top", rownames=TRUE,options = list(
                            pageLength = 300, lengthMenu = c(100,200,300,400,500,600)
                    ),
                    callback=JS("table.on( 'order.dt search.dt', function () {
                            table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                                  cell.innerHTML = i+1;});}).draw();"))
            })

如果我只在本地运行数据表(...代码的一部分；但是，当我在 Shiny 应用程序的 renderDataTable 中运行时它不起作用(行名称恢复为当您移至第一个页面以外的页面时的原始排序。根据上​​面链接的数据表文档中的评论，用户 DeFKnoL 确定如果您在表中的页面之间移动，这将无法正常工作 - 这正是问题所在我运行我的 Shiny 应用程序。DeFKnoL 的评论指出 ("deferRender": true) 会导致此问题 - 我已尝试在 DT::datatable 选项中将其更改为 FALSE，但这并不能解决问题.

我希望有人能帮助我将这个用户的 javascript 代码转换成我可以输入到 DT::datatable 的回调选项中的东西。

这是来自数据表文档中概述的原始方法的 javascript 代码(NicE 修改用于回调):

$(document).ready(function() {
var t = $('#example').DataTable( {
    "columnDefs": [ {
        "searchable": false,
        "orderable": false,
        "targets": 0
    } ],
    "order": [[ 1, 'asc' ]]
} );

t.on( 'order.dt search.dt', function () {
    t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
    } );
} ).draw();

});

这里是 DeFKnoL 的更新方法，它解决了更改页面的问题:

$(document).ready(function() {
var t = $('#example').DataTable( {
    "columnDefs": [ {
        "searchable": false,
        "orderable": false,
        "targets": 0
    } ],
    "order": [[ 1, 'asc' ]]
} );

t.on( 'draw.dt', function () {
var PageInfo = $('#example').DataTable().page.info();
     t.column(0, { page: 'current' }).nodes().each( function (cell, i) {
        cell.innerHTML = i + 1 + PageInfo.start;
    } );
} );

});

正如您可能看到的，NicE 的 JS() 输入与文档不完全匹配——而且我没有使用 javascript 的经验——所以我很难实现此更改。添加“计数器列”可能比这简单得多，但除了上面链接的原始问题之外，我没有找到任何方法。任何帮助将不胜感激!

Answer 1

两种可能性:

1) 使用server = FALSE:

output$tbl <- renderDT({
  datatable(data, filter = "top", rownames=TRUE, 
            options = list(
              pageLength = 300, lengthMenu = c(100,200,300,400,500,600)
            ),
            callback=JS("table.on( 'order.dt search.dt', function () {
              table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
              cell.innerHTML = i+1;});}).draw();")
  )
}, server = FALSE)

2) 否则，这里是 DeFKnoL 的方法:

js <- c(
  "table.on('draw.dt', function(){",
  "  var PageInfo = table.page.info();",
  "  table.column(0, {page: 'current'}).nodes().each(function(cell,i){", 
  "    cell.innerHTML = i + 1 + PageInfo.start;",
  "  });",
  "})")

output$tbl <- renderDT({
  datatable(data, filter = "top", rownames=TRUE, 
            options = list(
              pageLength = 300, lengthMenu = c(100,200,300,400,500,600)
            ),
            callback = JS(js)
  )
})