使用回调选项选择新页面后,R DT 数据表不保留行 index/counter 列
R DT datatable not retaining row index/counter column after selecting new page when using callback option
我在 Shiny 应用程序中使用 this question as a reference to add a "row index" or "counter column" (as described in the datatable documentation here) 到 DT::datatable
。目的是将行名称保留在 table 常量(1、2、3...)中,而不管应用于 table.
的排序如何
用户 NicE 通过转换数据 table 文档中的 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();"))
})
如果我 运行 只有数据 table(... 本地代码部分;但是,当我 运行 在 renderDataTable
在 Shiny 应用程序中(当您移至第一个页面以外的页面时,行名称将恢复为原始排序)。根据上面链接的数据 table 文档中的评论,用户 DeFKnoL 确定这不会如果您在 table 中的页面之间移动,则可以正常工作 - 这是我 运行 我的 Shiny 应用程序时的确切问题。DeFKnoL 的评论指出 ("deferRender": true) 会导致此问题 - 我已尝试在 DT::datatable
选项中将其更改为 FALSE,但这并不能解决问题。
我希望有人能帮我把这个用户的 javascript 代码转换成我可以输入 DT::datatable
的回调选项的东西。
这是来自数据table 文档中概述的原始方法的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 的经验 - 所以我很难实施此更改。添加 "counter column" 可能比这简单得多,但除了上面链接的原始问题之外,我没有找到任何方法。任何帮助将不胜感激!
两种可能性:
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)
)
})
我在 Shiny 应用程序中使用 this question as a reference to add a "row index" or "counter column" (as described in the datatable documentation here) 到 DT::datatable
。目的是将行名称保留在 table 常量(1、2、3...)中,而不管应用于 table.
用户 NicE 通过转换数据 table 文档中的 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();"))
})
如果我 运行 只有数据 table(... 本地代码部分;但是,当我 运行 在 renderDataTable
在 Shiny 应用程序中(当您移至第一个页面以外的页面时,行名称将恢复为原始排序)。根据上面链接的数据 table 文档中的评论,用户 DeFKnoL 确定这不会如果您在 table 中的页面之间移动,则可以正常工作 - 这是我 运行 我的 Shiny 应用程序时的确切问题。DeFKnoL 的评论指出 ("deferRender": true) 会导致此问题 - 我已尝试在 DT::datatable
选项中将其更改为 FALSE,但这并不能解决问题。
我希望有人能帮我把这个用户的 javascript 代码转换成我可以输入 DT::datatable
的回调选项的东西。
这是来自数据table 文档中概述的原始方法的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 的经验 - 所以我很难实施此更改。添加 "counter column" 可能比这简单得多,但除了上面链接的原始问题之外,我没有找到任何方法。任何帮助将不胜感激!
两种可能性:
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)
)
})