如何在.draw（）之后维护jQuery DataTables滚动位置
我正在为一个小表（12行）使用jQuery Datatables插件。 一些<input type="text" ...字段允许编辑。 当输入字段失去焦点时，我需要validation其值并可能更改字段值。 我无法在不发出.draw()情况下获取DataTables可识别的修改输入字段值，但这会导致表格滚动到表格顶部。
有没有办法在发出.draw（）之后保持当前的滚动位置？
$('#mytable').on('blur', 'input', function (e) { var inputFieldId = this.id; var inputFieldVal = $(this).val(); { ... perform validation of field value ... } $('#mytable').DataTable().rows().invalidate().draw(); });
编辑
我看到有人试图做同样的事情，他们表示以下代码适用于他们。 这似乎是一种完成我需要的非常简单的方法，但我总是得到自己的scrollTop = 0。 有人看到我如何获得当前所选行的行索引？
var scrollPos = $(".dataTables_scrollBody").scrollTop(); $('#mytable').DataTable().rows().invalidate().draw(false); $(".dataTables_scrollBody").scrollTop(scrollPos);
我不认为你可以这样做，但你可以使用回调函数：
$(document).ready(function() { var selected = []; $("#example").dataTable({ "processing": true, "serverSide": true, "ajax": "scripts/ids-arrays.php", "rowCallback": function( row, data ) { if ( $.inArray(data.DT_RowId, selected) !== -1 ) { $(row).addClass('selected'); } } }); $('#example tbody').on('click', 'tr', function () { var id = this.id; var index = $.inArray(id, selected); if ( index === -1 ) { selected.push( id ); } else { selected.splice( index, 1 ); } $(this).toggleClass('selected'); } ); } );
参考： https ： //datatables.net/examples/server_side/select_rows.html
var table = $('table#example').DataTable({ "preDrawCallback": function (settings) { pageScrollPos = $('div.dataTables_scrollBody').scrollTop(); }, "drawCallback": function (settings) { $('div.dataTables_scrollBody').scrollTop(pageScrollPos); }});
这似乎对我有用。 我只需要在绘制表格后找到div.dataTables_scrollBody 。
只是想在这里添加它，虽然这是一个稍微不同的场景 – 它适用于我的情况，并可能对到达这里寻找答案的其他人有用。
我正在使用服务器端处理并使用table.ajax.reload()每10秒刷新一次表数据。 此函数接受一个参数来维护当前的分页值，但无法保持滚动位置。 该解决方案与OP提到的解决方案非常相似，并在回调上设置滚动位置。 不知道为什么它不适合他，但这里是我成功使用的区间代码：
setInterval( function () { scrollPos = $(".dataTables_scrollBody").scrollTop(); myTable.ajax.reload(function() { $(".dataTables_scrollBody").scrollTop(scrollPos); },false); }, 10000 );
我使用DataTables 1.10解决它的方法是使用preDrawCallBack来保存ScrollTop位置，然后使用DrawCallback来设置它。
var pageScrollPos = 0; var table = $('#example').DataTable({ "preDrawCallback": function (settings) { pageScrollPos = $('body').scrollTop(); }, "drawCallback": function (settings) { $('body').scrollTop(pageScrollPos); } });
如果您传递draw函数的page参数，则表格不会在滚动中移动，但会从.DataTable源重新读取。 例如，在“保存”更新DataTable的数据之后：
$("your-selector").DataTable().row(t_itemid).invalidate(); $("your-selector").DataTable().row(t_itemid).draw('page');
注意：我在我的DataTable实例化中使用了一个id列，这使得直接使用单行更容易。 但我相信page参数会给出所需的结果。
这个黑客怎么样？ 它不涉及scrollTop()首先打开jquery.dataTables.js并寻找这一行，并将其删除：
divBodyEl.scrollTop = 0
之后在draw（）/ clear（）调用之前放入以下代码：
var $tbl=$('#my_table_id'); if (!document.getElementById('twrapper')) $tbl.wrap( '' ); else $('#twrapper').css('height',$tbl.height()+'px');
我花了一些时间才弄清楚这一点。
以下代码保留Datatables服务器端重新加载时的滚动位置。
var table = $('#mytable').DataTable(); var start_row = table.scroller.page()['start']; table.ajax.reload(function () { table.scroller().scrollToRow(start_row, false); }, false);