Gestion de grands ensembles de données de grille en JavaScript

Question

Quelles sont certaines des meilleures solutions pour gérer de grands ensembles de données (100K) sur le client avec JavaScript. En particulier, si vous disposez de capacités de tri et de recherche sur plusieurs colonnes, comment gérez-vous l'extraction (et la récupération) des données, la liaison du modèle côté client (pour l'affichage) et la mise en cache des données.

J'imagine qu'une bonne solution serait de faire un travail réfléchi en arrière-plan. Par exemple, initialement, si la table affichait N éléments, elle pourrait récupérer 2N éléments, retourner les données pour l'utilisateur, puis aller chercher les 2N prochains éléments en arrière-plan (même si l'utilisateur n'a pas demandé cela). Au fur et à mesure que l'utilisateur effectuait des modifications de recherche/tri, il rejetait (ou peut-être même mettait en cache le cas de base initial) et exécutait des fonctionnalités similaires.

Pouvez-vous partager les meilleures solutions que vous avez vues?

Merci

Answer 1

Cela dépend de la façon dont les données seront utilisées.

Pour un ensemble de données volumineux, lorsque la fonction de recherche du navigateur était adéquate, il suffisait de renvoyer un tableau HTML rectiligne. Il faut un certain temps pour charger, mais l'affichage est réactif sur les clients plus anciens et plus lents, et vous ne devez jamais vous inquiéter de la rupture. Lorsque le client a fait le tri et la recherche, et que vous n'affichez pas la table entière en même temps, le serveur a envoyé des tables délimitées par des tabulations via XMLHTTPRequest, les a analysées dans le navigateur avec list = String.split (' \ n '), et mis à jour l'affichage avec des appels répétés à $ (' node '). innerHTML =' blah '. Le moteur JS peut stocker de longues chaînes assez efficacement. Cela a fonctionné beaucoup plus rapidement sur le client que l'affichage, la dissimulation et la réorganisation des nœuds DOM. Créer et détruire de nouveaux nœuds DOM à la volée s'est avéré être très lent. La division de chaque ligne en champs à la demande semble fonctionner; Je n'ai pas expérimenté avec ce degré de liberté.

Je n'ai jamais essayé l'astuce de pré-extraction &, car ces autres méthodes fonctionnaient assez bien.

Answer 2

utiliser un plugin de table comme jQuery DataTables: http://datatables.net/

Il prend en charge le traitement côté serveur pour le tri, le filtrage et la pagination. Et il inclut le support de pipelining pour précharger les pages suivantes x d'enregistrements: http://www.datatables.net/examples/server_side/pipeline.html

En fait, le plugin DataTables fonctionne 4 façons différentes: 1. Avec un tableau HTML, vous pouvez donc faire descendre un tas de HTML et ensuite tous les le tri, le filtrage et le travail de pagination côté client. 2. Avec un tableau JavaScript, vous pouvez envoyer un tableau 2D et le laisser créer la table à partir de là. 3. Source Ajax - qui ne vous est pas vraiment applicable. 4. Côté serveur, où vous envoyez des données au format JSON à une table vide et laissez DataTables le prendre à partir de là.

Answer 3

Depuis que vous l'avez marqué avec Ext JS, je vais vous diriger vers Ext.ux.LiveGrid si vous ne l'avez pas déjà vu. La source est disponible, vous pouvez donc jeter un coup d'œil et voir comment ils ont résolu ce problème. C'est une extension populaire et largement utilisée dans le monde Ext JS. Cela dit, je pense personnellement (virtuellement) que le chargement de beaucoup de données est inutile en tant qu'expérience utilisateur. Tirer manuellement une barre de défilement (sauter des centaines d'enregistrements par pixel) est une expérience bien inférieure à la simple saisie de ce que vous voulez. Je préférerais de loin un filtrage/une recherche robuste au lieu de présenter autant de données à l'utilisateur.

si vous êtes allé à Google et au lieu d'une boîte de recherche, il vient de charger l'Internet entier dans une longue liste virtuelle que vous deviez faire défiler pour trouver votre site ... :)

Answer 4

SlickGrid fait exactement Qu'est-ce que vous cherchez. (Demo)

En utilisant le magasin de données AJAX, SlickGrid peut gérer des millions de lignes sans broncher.

Answer 5

Consultez les tableaux de données this comprehensive list et les tableaux .

À des fins de filtrage/tri/pagination, vous pouvez être intéressé par Handsontable ou DataTables comme alternative gratuite.

Si vous avez besoin d'afficher simplement une liste énorme sans fonctionnalités supplémentaires Clusterize.js devrait suffire.