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

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

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

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

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

Answer 3

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

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

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

Answer 4

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

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

我使用DataTables 1.10解决它的方法是使用preDrawCallBack保存ScrollTop位置，然后使用DrawCallback来设置它。

return std::make_tuple(std::move(tmp), 99);

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);

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

7 个答案: