使用回调选项选择新页面后，R DT数据表未保留行索引/计数器列 [英] R DT datatable not retaining row index/counter column after selecting new page when using callback option

问题描述

我正在使用这个问题作为对添加行索引或计数器列（如数据表文档此处）到Shiny应用程序中的 DT :: datatable 。目的是使表中的行名保持不变（1、2、3 ...），而不考虑对表进行的排序。

I am using this question as a reference to add a "row index" or "counter column" (as described in the datatable documentation here) to a DT::datatable in a Shiny application. The intent is to hold the row names in the table constant (1, 2, 3...) regardless of the sorting that is applied to the table.

用户NicE通过转换datatable文档中的javascript代码以供 DT :: datatable 选项的回调使用，来回答了这个问题：

The user NicE answered this question by converting the javascript code in the datatable documentation for use in the callback of the DT::datatable options:

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

如果我只运行datatable（...本地代码； howev嗯，当我在Shiny应用程序的 renderDataTable 中运行时，它不起作用（当您移至第一个页面以外的行时，行名将还原为原始排序）。根据上面链接的数据表文档中的注释，用户DeFKnoL确定，如果您在表中的页面之间移动，这将无法正常工作-这是我运行Shiny应用程序时的确切问题。 DeFKnoL的评论指出（ deferRender：true）导致此问题-我试图在 DT :: datatable 选项中将其更改为FALSE，但这不能解决问题。

This works fine if I run only the datatable(... portion of the code locally; however, it does not work when I run within renderDataTable in the Shiny application (the row names revert to the original sorting when you move to a page other than the first). Per a comment in the datatable documentation linked above, the user DeFKnoL identified that this does not work properly if you move between pages in the table - this is the exact problem when I run my Shiny application. DeFKnoL's comment states that ("deferRender": true) causes issues with this - I have tried changing this to FALSE in the DT::datatable options and this does not fix the problem.

我希望有人可以帮助我将此用户的javascript代码转换为可以输入 DT :: datatable 。

I am hoping someone can help me convert this user's javascript code into something that I can feed into the callback option of DT::datatable.

这是数据表文档（NicE修改为在回调中使用）概述的原始方法中的javascript代码：

Here is the javascript code from the original method outlined in the datatable documentation (that NicE modified for use in the callback):

$(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的更新方法，可解决更改页面的问题：

And here is DeFKnoL's updated method that gets around the issue of changing pages:

$(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的经验-因此我在实施此更改方面遇到了困难。添加计数器列可能比这简单得多，但是除了上面链接的原始问题之外，我没有其他任何方法可以找到。

As you can maybe see, NicE's JS() input doesn't exactly match the documentation - and I have no experience with javascript - so I'm having a tough time implementing this change. It is possible that adding a "counter column" is much simpler than this, but I've had no luck finding any methods other than the original question linked above. Any help would be appreciated!

推荐答案

两种可能性：

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的方法：

2) Otherwise, here is DeFKnoL's method:

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

这篇关于使用回调选项选择新页面后，R DT数据表未保留行索引/计数器列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！