如何在.draw（）之后维护jQuery DataTables滚动位置

Question

我正在为一个小表（12行）使用jQuery Datatables插件。一些<input type="text" ...字段允许编辑。当输入字段失去焦点时，我需要验证其值并可能更改字段值。我没有能够在不发布.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);

Answer 1

我不认为你可以这样做，但你可以使用回调函数：

$(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

Answer 2

var table = $('table#example').DataTable({
"preDrawCallback": function (settings) {
pageScrollPos = $('div.dataTables_scrollBody').scrollTop();
},
"drawCallback": function (settings) {
$('div.dataTables_scrollBody').scrollTop(pageScrollPos);
}});

这似乎对我有用。我只需要在绘制桌子后找到div.dataTables_scrollBody。

Answer 3

只是想在这里添加它，虽然这是一个稍微不同的场景 - 它适用于我的情况，并可能对到达这里寻找答案的其他人有用。

我正在使用服务器端处理并使用table.ajax.reload()每10秒刷新一次表数据。此函数接受一个参数来维护当前的分页值，但无法保持滚动位置。该解决方案与OP提到的解决方案非常相似，并在回调上设置滚动位置。不知道为什么它对他不起作用，但这里是我成功使用的区间代码：

setInterval( function () {
    scrollPos = $(".dataTables_scrollBody").scrollTop();
    myTable.ajax.reload(function() {
        $(".dataTables_scrollBody").scrollTop(scrollPos);
    },false);
}, 10000 );

Answer 4

如果你传递绘图函数page参数，表格不会在滚动中移动，但它会从.DataTable源重新读取。例如。在“保存”更新DataTable的数据之后：

$("your-selector").DataTable().row(t_itemid).invalidate();
$("your-selector").DataTable().row(t_itemid).draw('page');

注意：我在我的DataTable实例化中使用了id列，这使得直接使用单行更容易。但我相信page参数将给出所需的结果。

Answer 5

我使用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);
  }
});

Answer 6

这个黑客怎么样？它不涉及scrollTop()首先打开jquery.dataTables.js并寻找此行，并将其删除：

divBodyEl.scrollTop = 0

之后在draw（）/ clear（）调用之前放入以下代码：

var $tbl=$('#my_table_id');
if (!document.getElementById('twrapper')) $tbl.wrap( '<div id="twrapper" style="display:block; height:'+$tbl.height()+'px;"></div>' );
else $('#twrapper').css('height',$tbl.height()+'px');

我花了一些时间才弄清楚这一点。

Answer 7

以下代码保留Datatables服务器端重新加载时的滚动位置。

var table =  $('#mytable').DataTable();

var start_row = table.scroller.page()['start'];

table.ajax.reload(function () {

    table.scroller().scrollToRow(start_row, false);

}, false);