Table JavaScript réactive pour charger 20 000 enregistrements en 2 ou 3 secondes

Kathir

Table JavaScript réactive pour charger 20 000 enregistrements en 2 ou 3 secondes


Je recherche une table JavaScript réactive qui charge et gère au moins 20k enregistrements en 2 ou 3 secondes et dispose de nombreuses options:

  • CSV
  • Copier dans le presse-papier
  • Exporter Excel, PDF, texte, PNG, Word, JSON
  • Colonnes visibles

Il doit être open source.

Voici ceux que j’ai trouvés:

  • Couloir – Il n’est pas actif pour l’instant. Aucune mise à jour depuis longtemps.
  • Angular UI Grid – Utilise ng: répétition qui ralentit le rendu.
  • Slick Grid – Il n’est pas actif pour l’instant. Aucune mise à jour depuis longtemps.
  • Tables de données
Mawg

Cela ne semble pas être une quantité importante de données, même pour une seule seconde, c’est probablement pourquoi vous dites que vous avez « beaucoup d’options ». Pouvez-vous nous donner plus d’exigences? Par exemple, ces enregistrements sont-ils particulièrement énormes? Quel est le problème avec ceux que vous nommez? Btw, si cela prend autant de temps, veuillez afficher un indicateur de progression ( ux.stackexchange.com )

Mawg

Vous pouvez également envisager une «table virtuelle». C’est un tableau qui vieux tous les 20k enregistrements en mémoire, mais affiche seulement 20 ou 30, dans une fenêtre coulissante »à l’écran à tout moment. Comme c’est l’affichage qui prend du temps et de la mémoire en temps réel, cette technique existe depuis longtemps.

Réponses


 Sonamor

J’ai utilisé DataTables dans le passé. Il a une bonne API et une bonne documentation. Vous devrez peut-être contrôler le chargement de vos enregistrements de 20 000, plutôt que d’essayer de trouver un outil qui chargerait ces 20 000 lignes en une seule fois.

Kathir

pourquoi les performances ne sont toujours pas fixées dans les tableaux de données? existe-t-il une solution de contournement pour surmonter le problème de performances? n’importe quel correctif qui a fait dans la grille lisse ou une autre grille peut être incorporé dans les tables de données .. 20k est très inférieur dans une application d’entreprise ..

Sonamor

Vous voulez dire qu’il y a des utilisateurs qui ont besoin de lire 20 000 lignes en une seule fois? Vous devriez essayer d’utiliser la pagination. La pagination devrait casser les 20k en 40 pages ou plus, ce qui permettra à la page de se charger en 2 ou 3 secondes et le bouton de téléchargement devrait télécharger toutes les données.

Sonamor

Vous trouverez ici plus d’informations sur la pagination et les options dont vous disposez. datatables.net/examples/basic_init/alt_pagination.html

Kathir

la pagination interrompt la recherche dans l’ensemble du tableau …. peut-on rechercher dans des enregistrements entiers même si la pagination est définie?

Sonamor

Sur cette démo, cela semble bien fonctionner … phpflow.com/php/…


 Harry

La grille DHTMLX est ce que j’utilise pour toute interface utilisateur javascript.

Combiné avec le connecteur DHTMLX côté serveur, je peux rendre des tableaux avec des millions d’enregistrements en un rien de temps.

Comment ça fonctionne:

  • la grille javascript est configurée et initialisée sur le client, le paramètre smartrendering est défini sur ture et le nombre d’enregistrements à restituer est défini sur 100
  • lorsque la grille charge ses premières données, elle demande automatiquement au serveur le nombre de lignes à rendre et la liste des 100 premiers enregistrements
  • lorsque l’utilisateur fait défiler ou filtre, les demandes sont automatiquement transmises au serveur qui présente immédiatement l’ensemble limité de données devant être affichées sur le frontend

Remarque: DHTMLX est open source mais il existe également une solution PRO légèrement plus facile à utiliser que vous pouvez acheter.

Je ne suis pas affilié à DHTMLX.

Mawg

« Je peux rendre des tableaux avec des millions d’enregistrements en un rien de temps » … O’rly?

Harry

🙂 Non, juste des tests emperiques


 Edward Chan JW

Les tables de données devraient pouvoir prendre en charge des enregistrements volumineux, même côté serveur . Si vous avez besoin d’aide pour transférer des données sur le fil plus rapidement, vous aurez peut-être besoin d’une API de diffusion en continu ou d’une méthode ajax telle que comète.

jqGrid ou une autre bibliothèque jQuery devrait également fonctionner correctement

Si le chargement sur le fil est ce que vous aviez l’intention de demander, changez peut-être le titre ou posez une autre question.

Le chargement de 20 000 devrait être le maximum maximum à mettre en œuvre. Je suppose qu’environ 5k à 10k de chargement de données en une seule fois, pourraient fonctionner pour certaines tâches et charger un autre lot pendant que l’utilisateur en parcourrait la moitié. Testez votre scénario sur un navigateur en ligne, ou même sur un navigateur mobile pour la ligne maximale que vous souhaitez atteindre

 

#en, #ou, #pour, 000, 2, 20, 3, charger, enregistrements, JavaScript, réactive?, secondes, table

 

wiki

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *