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

Question

Я использую плагин 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(); 
}); 

EDIT

Я видел, кто-то пытается сделать то же самое, что и я, и они указали, что следующий код работает для них. Это похоже на очень простой способ выполнить то, что мне нужно, но я всегда получаю 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'); 
    }); 
}); 

Ref: https://datatables.net/examples/server_side/select_rows.html

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

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 5

Как насчет этого взлома? Это не связан с scrollTop() Первого открытого jquery.dataTables.js и искать для этой линии, и удалить его:

divBodyEl.scrollTop = 0 

После этого поместите следующий код перед вашим ничьим()/ясно() вызовами:

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 6

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

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

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

table.ajax.reload(function() { 

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

}, false);