J'étais très inquiet de la façon dont je pouvais créer un tableau sur mon blog personnel et ajouter des fonctionnalités de tableau qui me permettraient d'accéder rapidement à des données particulières. Dans le cas où les données des tableaux sont trop volumineuses, l’ajout d’une pagination s’est avéré extrêmement nécessaire. De plus, charger les données dans le tableau aussi efficacement que possible contribuerait à améliorer l'expérience de travail avec mon application de blog.
Créer un tableau en flacon est très simple. Tout ce que vous avez à faire est de définir une structure de tableau et d'afficher tous les utilisateurs dans le tableau.
La table de base est une table qui affiche toutes les données de la base de données, tout comme la table d'amorçage. Je l'appelle basique dans le sens où il est assez bon pour afficher des données courtes. Cependant, il n’est pas très efficace pour afficher des données volumineuses.
Le plus gros défaut du tableau de base, qui affiche simplement toutes les données utilisateur de notre base de données, est que, pendant quelques secondes au chargement de la page, ce tableau affichera l'intégralité du tableau avant que la pagination n'intervienne. grand, l'utilisateur devra attendre patiemment pendant que l'itinéraire "fait son travail" avant que la table finale ne soit affichée.
L'utilisation d'Ajax permet de résoudre le problème rencontré par la table de base. Ici, la table est d'abord chargée vide lorsque la demande d'accès à la table ajax est effectuée. Un deuxième point de terminaison est utilisé pour afficher les données dans le tableau. Cependant, ce tableau présente encore un léger problème. Si les données sont trop volumineuses, le tableau sera vide pendant quelques secondes avant que les données réelles ne soient affichées. En effet, la table entière doit d'abord être chargée, ce qui peut prendre du temps en fonction de la taille des données.
Avec la table côté serveur, toutes les fonctionnalités telles que la pagination, la recherche et le tri sont implémentées côté serveur. Il s’agit d’un moyen très efficace d’afficher des données volumineuses. Lorsqu'une demande de table paginée côté serveur est effectuée, seules les données trouvées dans la page particulière seront affichées. Si un utilisateur accède à une autre page, une nouvelle demande pour les données de la page suivante sera effectuée. Ainsi, seules les données nécessaires sont chargées et affichées. C'est une meilleure solution mais elle est un peu plus complexe à mettre en œuvre. Les fonctionnalités telles que la recherche et le tri doivent être déplacées du côté client vers le côté serveur.
REMARQUE : Si vous testez l'application sur le serveur Heroku, vous pourriez trouver une « Erreur inattendue ». En effet, Heroku fournit une quantité limitée pour le stockage de la base de données. L'application génère actuellement automatiquement des centaines d'utilisateurs qui, au moment où vous accédez à l'application, Heroku ont peut-être désactivé sa base de données pour avoir dépassé la limite de stockage de la version gratuite.
Si vous souhaitez tester l'application, vous pouvez utiliser les commandes suivantes pour exécuter l'application :
Clonez ce dépôt :
$ git clone [email protected]:GitauHarrison/beautiful-flask-tables.git
Changez de répertoire pour accéder à l'application :
$ cd beautiful-flask-tables
Créez et activez l'environnement virtuel :
$ mkvirtualenv flask-tables
Installer les dépendances :
$ pip3 install -r requirements.txt
Exécutez l'application :
$ flask run
Ouvrez l'application dans votre navigateur exécuté sur le port local 5000 :
L'utilisation de JQuery est actuellement obsolète. Cela rend DataTables.js obsolète car il repose sur JQuery. Découvrez la version mise à jour de ce projet ici où je montre comment travailler avec Grid.js.