Comment maintenir jQuery DataTables la position de défilement après .draw()

Je suis à l'aide de jQuery Datatables plugin pour un affichage en tableau (12 lignes). Certains <input type="text" ... des champs d'édition. Lorsque le champ perd le focus j'ai besoin de valider sa valeur et éventuellement modifier la valeur du champ. Je n'ai pas été en mesure d'obtenir modifiés champ de saisie de valeurs pour être reconnu par les tables de données sans l'émission d'un .draw() par la suite, mais cela provoque la table pour faire défiler vers le haut de la table.

Est-il un moyen de maintien de la position de défilement après l'émission d'une .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();
});

MODIFIER

J'ai vu quelqu'un essaie de faire la même chose que je suis et ils ont indiqué que le code suivant a travaillé pour eux. Cela semble être un moyen très simple de réaliser ce dont j'ai besoin, mais je suis toujours scrollTop = 0 moi-même. Quelqu'un voit comment je peux obtenir le rang de l'indice de la ligne sélectionnée?

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

Désolé de ne pas voir vos modifications, vous code est correct, mais essayez avec scrollTo() $(".dataTables_scrollBody").scrollTo('#IDROW'). qui "IDROW' est l'ID de la LIGNE ou tout simplement l'ID de l'entrée que vous avez changé
Juste au cas où vous avez plusieurs tables de données avec le même nom de classe, vous devriez utiliser le sélecteur d'ID $("#divContrainer1 > .dataTables_scrollBody").scrollTop()
Oui, vous pouvez le faire. Avec un sale hack, mais vous pouvez. Chercher ma réponse ci-dessous.

OriginalL'auteur rwkiii | 2014-12-27

Je ne pense pas que vous pouvez faire, mais vous pouvez utiliser la fonction de Rappel à la place:

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

Je vous remercie. J'ai édité mon post avec une solution quelqu'un a dit a travaillé pour eux, mais scrollTop pour moi, c'est toujours égale à 0. Voyez-vous quelque mérite à l'édités exemple? Je suppose que j'ai besoin de scrollTop à la ligne sélectionnée index, mais compte tenu de mon événement déclencheur, je ne suis pas sûr de la façon d'obtenir la ligne actuelle de l'indice. Je n'ai pas essayé ton exemple encore parce que je ne suis pas complètement comprendre comment il fonctionne.
vous pouvez ajouter et attribut ID pour l'un de votre élément de ligne, puis yous $('body').scrollTo('#cible"); après l'édition de votre élément. si mon explication n'est pas assez clair dites le moi.

OriginalL'auteur JC Sama

var table = $('table#example').DataTable({
"preDrawCallback": function (settings) {
pageScrollPos = $('div.dataTables_scrollBody').scrollTop();
},
"drawCallback": function (settings) {
$('div.dataTables_scrollBody').scrollTop(pageScrollPos);
}});

Cela semble fonctionner pour moi. J'ai juste eu à trouver la div.dataTables_scrollBody après la table a été tiré.

Réponse correcte.
sauvé mon temps. Merci

OriginalL'auteur Paul Matthew

6

Voulais juste ajouter ceci ici, mais c'est un peu différente de scénario travaillé pour mon cas et sera probablement utile à certains autres qui viennent ici à la recherche de réponses.

Je suis en utilisant le côté de serveur de traitement et de faire une actualisation des données de la table une fois toutes les 10 secondes avec table.ajax.reload(). Cette fonction accepte un argument pour le maintien de la pagination de la valeur, mais ne parvient pas à maintenir la position de défilement. La solution était très semblable à celui de l'OP mentionné et définit la position de défilement sur le rappel. Je ne sais pas pourquoi il ne fonctionne pas pour lui, mais ici, c'est l'intervalle de code que j'utilise avec succès:
```
setInterval( function () {
    scrollPos = $(".dataTables_scrollBody").scrollTop();
    myTable.ajax.reload(function() {
        $(".dataTables_scrollBody").scrollTop(scrollPos);
    },false);
}, 10000 );
```
Grande solution simple

OriginalL'auteur billynoah
4

Si vous passez à la fonction draw le page paramètre, la table ne bouge pas dans le défilement, mais il sera re-lire à partir de la .DataTable source. E. g. après le sauvetage de données qui met à jour la Table de données:
```
$("your-selector").DataTable().row(t_itemid).invalidate();
$("your-selector").DataTable().row(t_itemid).draw('page');
```
Note: je suis en faisant appel à un id colonne dans ma DataTable instanciation qui le rend facile à travailler directement avec une seule ligne. Mais je crois que la page paramètre donne le résultat souhaité.

$table.draw('page') fonctionne mieux que toutes les autres solutions. Réglage scrollTop directement de défilement, mais également faire l'objet datatable perdre la trace de l'endroit où il est et d'autres contrôles misreport des données telles que le début/la fin de lignes affichées etc

OriginalL'auteur Charlie

La façon dont je l'ai résolu avec les tables de données 1.10 est d'utiliser preDrawCallBack pour enregistrer le ScrollTop position puis DrawCallback.

var pageScrollPos = 0;

var table = $('#example').DataTable({
  "preDrawCallback": function (settings) {
    pageScrollPos = $('body').scrollTop();
  },
  "drawCallback": function (settings) {
    $('body').scrollTop(pageScrollPos);
  }
});

OriginalL'auteur sur

0

Comment à propos de ce hack? Elle n'implique pas de scrollTop() de la Première ouverture jquery.dataTables.js et de demander pour cette ligne, et de les supprimer:
```
divBodyEl.scrollTop = 0
```
Après cela, placez le code suivant avant le draw()/clear() invocations:
```
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');
```
Il m'a fallu un certain temps pour comprendre cela.

OriginalL'auteur PatlaDJ

Le code suivant conserve la position de défilement sur les tables de données côté serveur de rechargement.

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

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

table.ajax.reload(function () {

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

}, false);

OriginalL'auteur DragonSpirit

Vous devez vous connecter pour publier un commentaire.