如何在.draw()之后维护jQuery DataTables滚动位置

Question

我正在为一个小表(12行)使用jQuery Datatables插件.某些<input type="text" ...字段允许编辑.当输入字段失去焦点时,我需要验证其值并可能更改字段值.我没有能够在不发出事件的情况下获得DataTables识别的修改输入字段值.draw(),但这会导致表格滚动到表格的顶部.

有没有办法在发出.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

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 2

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

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

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

Answer 3

我用 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 4

如果您将page参数传递给draw函数，则表不会在滚动中移动，但会从.DataTable源中重新读取。例如，在“保存”更新数据表的数据之后：

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

注意：我正在idDataTable实例化中使用一列，这使得直接处理单行变得容易。但我相信该page参数将提供理想的结果。

Answer 5

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

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