Как сохранить jQuery DataTables прокручивать позицию после .draw()

Я использую плагин jQuery Datatables для таблицы smal (12 строк). Некоторые поля <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);

Ответ 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

Ответ 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 после того, как таблица была нарисована.

Ответ 3

Просто хотел добавить это здесь, хотя это несколько другой сценарий - он работал для моего случая и, вероятно, будет полезен для некоторых других, которые приходят сюда искать ответы.

Я использую обработку на стороне сервера и обновляю данные таблицы каждые 10 секунд с помощью table.ajax.reload(). Эта функция принимает аргумент для поддержания текущего значения поискового вызова, но не сохраняет позицию прокрутки. Решение было очень похоже на решение, указанное в OP, и устанавливает положение прокрутки в обратном вызове. Не уверен, почему это не сработало для него, но вот код интервала, который я использую с успехом:

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

Ответ 4

Если вы передадите в функцию рисования параметр page, таблица не будет сдвигаться при прокрутке, но будет повторно считываться из источника .DataTable. Например, после "сохранения" данных, которые обновляют DataTable:

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

Примечание. Я использую столбец id в своем экземпляре DataTable, который облегчает работу непосредственно с одной строкой. Но я верю, что параметр page даст желаемый результат.

Ответ 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);
  }
});

Ответ 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');

Мне понадобилось время, чтобы понять это.

Ответ 7

Следующий код сохраняет положение прокрутки после перезагрузки сервера Datatables.

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

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

table.ajax.reload(function () {

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

}, false);

Ответ 8

Ни одно из решений не работает для меня. при вызове .draw(false) страница прокручивается до заголовка DataTable. Любая подсказка?