Come mantenere la posizione di scorrimento di jQuery DataTables dopo .draw()

Question

Sto utilizzando il plug-in Datatables jQuery per una piccola tabella (12 righe). Alcuni campi <input type="text" ... consentono la modifica. Quando il campo di input perde lo stato attivo, è necessario convalidarne il valore ed eventualmente modificare il valore del campo. Non sono stato in grado di ottenere i valori dei campi di input modificati per essere riconosciuti da DataTables senza emettere uno .draw() in seguito, ma questo fa sì che la tabella scorra fino all'inizio della tabella.

Esiste un modo per mantenere la posizione di scorrimento corrente dopo l'emissione di .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

Ho visto qualcuno che cerca di fare la stessa cosa sono e hanno indicato che il seguente codice ha funzionato per loro. Questo mi sembra un modo molto semplice per realizzare ciò di cui ho bisogno, ma ottengo sempre scrollTop = 0 me stesso. Qualcuno vede come posso ottenere l'indice di riga della riga attualmente selezionata?

var scrollPos = $(".dataTables_scrollBody").scrollTop(); 
$('#mytable').DataTable().rows().invalidate().draw(false); 
$(".dataTables_scrollBody").scrollTop(scrollPos); 

Answer 1

non credo che si può fare, ma è possibile utilizzare la funzione di callback, invece:

$(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'); 
    }); 
}); 

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

Answer 2

Volevo solo aggiungere questo qui se è un po ' scenario diverso - Ha funzionato per il mio caso e sarà probabilmente utile per alcuni altri che arrivano qui alla ricerca di risposte.

Sto utilizzando l'elaborazione lato server e faccio un aggiornamento dei dati della tabella ogni 10 secondi con table.ajax.reload(). Questa funzione accetta un argomento per mantenere il valore di paging corrente ma non riesce a mantenere la posizione di scorrimento. La soluzione era molto simile a quella menzionata dall'OP e imposta la posizione di scorrimento sul callback. Non certo perché non ha funzionato per lui, ma qui è il codice intervallo che sto utilizzando con successo:

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

Answer 3

Il modo in cui ho risolto con DataTable 1.10 è quello di utilizzare preDrawCallBack per salvare la posizione scrollTop e poi DrawCallback a impostalo.

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

Questo sembra funzionare per me. Ho dovuto trovare il div.dataTables_scrollBody dopo che il tavolo è stato disegnato.

Answer 5

Che ne dici di questo trucco? Non comporta scrollTop() First jquery.dataTables.js aperti e cercare per questa linea, e rimuoverlo:

divBodyEl.scrollTop = 0 

dopo che ha messo il seguente codice prima del vostro draw()/clear() invocazioni:

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

Mi ci è voluto un po 'di tempo per capirlo.

Answer 6

Il seguente codice mantiene la posizione di scorrimento su lato server Datatables ricarica.

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

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

table.ajax.reload(function() { 

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

}, false);