当前位置: 首页 > 知识库问答 >
问题:

使用回调选项时选择新页后,R DT datatable不保留行索引/计数器列

祁承嗣
2023-03-14

我使用这个问题作为参考,在一个闪亮的应用程序中向DT::datatable添加一个“行索引”或“计数器列”(如这里的datatable文档中所述)。其目的是保持表中的行名称不变(1、2、3…)不考虑应用于表的排序。

用户NicE通过转换datatable文档中的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();"))
            })

如果我只在本地运行datatable(…部分代码;但是,当我在闪亮应用程序的renderDataTable中运行时,它不起作用(当移动到第一个页面以外的页面时,行名恢复为原始排序)。根据上面链接的datatable文档中的一条注释,用户DeFKnoL发现,如果在表中的页面之间移动,这将无法正常工作-这正是我运行我的应用程序时的问题。DeFKnoL的评论指出(“deferRender”:true)会导致此问题-我已尝试在DT::datatable选项中将其更改为FALSE,但这并不能解决此问题。

我希望有人能帮我把这个用户的javascript代码转换成我可以输入回调选项的DT::da可标记的

下面是datatable文档中概述的原始方法中的javascript代码(该代码经过了修改以用于回调):

$(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()input与文档不完全匹配,而且我没有使用javascript的经验,因此我很难实现这一更改。添加“计数器列”可能比这简单得多,但除了上面链接的原始问题之外,我没有找到其他方法。任何帮助都将不胜感激!

共有1个答案

慕俊迈
2023-03-14

两种可能性:

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)
  )
})
 类似资料: