jQuery Girl
  1. jQuery Girl
  3. Comment maintenir jQuery DataTables position de défilement après .draw ()
Intereting Posts
Javascript à Jquery, append du texte dans l’entrée onclick Récupère l’object canvas en utilisant fabric js NodeJS – Désactiver JSONP sur des routes spécifiques jquery / css: faire défiler le texte à l’intérieur de div horizontalement comme un ticker de news sans plugin Tableau JS int au contrôleur MVC3 Charger des valeurs dans select2 multiselect Détermination d’un appui long (appui long, maintien de la pression) sous Android avec jQuery jQuery désavantages d’utiliser systématiquement ‘live’ Conversion d’un tableau de chaîne en entier à l’aide de jquery jquery: bind onclick Invocation illégale (jQuery) Validation jQuery personnalisée .addMethod Comment faire glisser des zones de texte et des entrées à l’aide de jQuery Obtenir un object spécifique en fonction du texte dans l’object jQuery autocomplete json source – Ne complète pas automatiquement, mais affiche simplement la liste complète

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

J’utilise le plugin jQuery Datatables pour une petite table (12 lignes). Certains champs <input type="text" ... permettent l’édition. Lorsque le champ de saisie perd le focus, je dois valider sa valeur et éventuellement modifier la valeur du champ. Je n’ai pas pu obtenir de DataTables que les valeurs de champ de saisie modifiées soient reconnues sans émettre par la .draw() un .draw() , mais la table défile alors en haut de la table.

Existe-t-il un moyen de conserver la position de défilement actuelle après avoir émis un .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 essayer de faire la même chose que moi et ils ont indiqué que le code suivant fonctionnait pour eux. Cela semble être un moyen très simple de réaliser ce dont j’ai besoin, mais je reçois toujours scrollTop = 0. Tout le monde voit comment je peux obtenir l’index de la ligne actuellement sélectionnée? 

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

Je ne pense pas que vous puissiez faire cela, 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'); } ); } );

Réf.: https://datatables.net/examples/server_side/select_rows.html 

 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. Je devais juste trouver le div.dataTables_scrollBody après que la table ait été dessinée.

Je voulais juste append ceci ici, bien que le scénario soit légèrement différent: cela a fonctionné pour mon cas et sera probablement utile à d’autres qui arrivent ici à la recherche de réponses.

J’utilise un traitement côté serveur et effectue un rafraîchissement des données de la table toutes les 10 secondes avec table.ajax.reload() . Cette fonction accepte un argument pour conserver la valeur de pagination actuelle, mais ne parvient pas à conserver la position de défilement. La solution était très similaire à celle mentionnée par le PO et définissait la position de défilement sur le rappel. Vous ne savez pas pourquoi cela ne fonctionne pas pour lui, mais voici le code d’intervalle que j’utilise avec succès: 

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

La façon dont je l’ai résolu avec DataTables 1.10 est d’utiliser preDrawCallBack pour enregistrer la position ScrollTop, puis DrawCallback pour le définir. 

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

Si vous transmettez au paramètre page la fonction draw, la table ne sera pas déplacée dans le défilement, mais sera relue à partir de la source .DataTable . Par exemple, après “l’enregistrement” des données mettant à jour le DataTable: 

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

Remarque: J’utilise une colonne id dans mon instanciation DataTable, ce qui facilite le travail direct avec une seule ligne. Mais je crois que le paramètre de page donnera le résultat souhaité.

Que diriez-vous de ce hack? scrollTop() n’est d’abord pas ouvert. Ouvrez jquery.dataTables.js et recherchez cette ligne, puis supprimez-la: 

 divBodyEl.scrollTop = 0

Après cela, placez le code suivant avant vos invocations draw () / clear (): 

 var $tbl=$('#my_table_id'); if (!document.getElementById('twrapper')) $tbl.wrap( '
' ); else $('#twrapper').css('height',$tbl.height()+'px');

Il m’a fallu du temps pour comprendre cela.

Le code suivant conserve la position de défilement lors du rechargement côté serveur de Datatables. 

 var table = $('#mytable').DataTable(); var start_row = table.scroller.page()['start']; table.ajax.reload(function () { table.scroller().scrollToRow(start_row, false); }, false);