Share
Dans la partie précédente de cette série, nous avons vu comment mettre en œuvre le modifier et Effacer souhait fonctionnalité pour notre application liste de seau. Dans cette partie, nous allons implémenter la fonctionnalité de pagination pour notre liste de base d’utilisateurs..
Commençons par cloner la partie précédente du tutoriel de GitHub.
Clone git https://github.com/jay3dec/PythonFlaskMySQLApp_Part4.git
Une fois le code source cloné, accédez au répertoire du projet et démarrez le serveur Web..
cd PythonFlaskMySQLApp_Part4 python app.py
Pointez votre navigateur sur http: // localhost: 5002 / et vous devriez avoir l'application en cours d'exécution.
Au fur et à mesure que la liste des souhaits sur la page d'accueil de l'utilisateur augmente, il est fait défiler la page. Il est donc important de mettre en œuvre la pagination. Nous limiterons le nombre d'éléments affichés sur une page à un certain nombre.
Nous allons commencer par modifier le sp_GetWishByUser procédure pour retourner les résultats sur la base d'un limite et décalage valeur. Cette fois, nous allons créer notre instruction de procédure stockée de manière dynamique pour renvoyer le jeu de résultats en fonction de la valeur limite et de la valeur de décalage. Voici le modifié sp_GetWishByUser Procédure stockée MySQL.
Accentsconagua
UTILISEZ 'BucketList'; DROP procedure IF EXISTS 'sp_GetWishByUser'; DELIMITER $$ USE 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetWishByUser' (IN p_user_id bigint, IN p_limit int, IN p_offset int) BEGIN SET @ t1 = CONCAT ('select * from tbl_wish where wish_user_id = ', p_user_id,' commande par souhait_date desc limite ', p_limit,' offset ', p_offset); PREPARE stmt FROM @ t1; EXECUTE stmt; DEALLOCATE PREPARE stmt1; FIN $$ DELIMITER; Comme indiqué dans la procédure stockée ci-dessus, nous avons créé notre requête SQL dynamique et l'avons exécutée pour obtenir la liste de souhaits en fonction de la décalage et limite paramètres.
Commençons par définir quelques paramètres par défaut. Dans app.py ajouter une variable pour la limite de page.
# Paramètre par défaut pageLimit = 2
Faire le getWish méthode python accepte les requêtes POST.
@ app.route ('/ getWish', method = ['POST']) Lis le décalage et limite à l'intérieur de getWish méthode et le transmettre tout en appelant la procédure stockée MySQL sp_GetWishByUser.
_limit = pageLimit _offset = request.form ['offset'] con = mysql.connect () curseur = con.cursor () cursor.callproc ('sp_GetWishByUser', (_utilisateur, _limit, _offset)) souhaite = curseur.fetchall () Modifier le GetWishes Fonction JavaScript dans userHome.html en faire une demande POST et passer le décalage valeur.
fonction GetWishes () $ .ajax (url: '/ getWish', type: 'POST', données: offset: 0, succès: fonction (res) var wishObj = JSON.parse (res); $ ( '#ulist'). empty (); $ ('# listTemplate'). tmpl (wishObj) .appendTo ('# ulist');, erreur: function (erreur) console.log (erreur);) ; Enregistrez toutes les modifications et redémarrez le serveur. Connectez-vous en utilisant une adresse e-mail et un mot de passe valides. Deux enregistrements seulement devraient s'afficher à l'écran..
La base de données fonctionne donc bien. Ensuite, nous devons ajouter l'interface utilisateur de pagination à la page d'accueil de l'utilisateur, ce qui permettra à l'utilisateur de naviguer dans les données..
Nous allons utiliser le composant de pagination Bootstrap. S'ouvrir userHome.html et ajoutez le code HTML suivant après la #uliste UL.
Enregistrez les modifications et redémarrez le serveur. Après vous être connecté, vous devriez pouvoir voir la pagination dans la liste de souhaits..
La pagination ci-dessus est à quoi ressemblera notre pagination. Mais pour le rendre fonctionnel, nous devons créer notre pagination de manière dynamique en fonction du nombre d'enregistrements dans la base de données..
Pour créer notre pagination, nous aurons besoin du nombre total d'enregistrements disponibles dans la base de données. Modifions donc la procédure stockée MySQL sp_GetWishByUser pour renvoyer le nombre total d'enregistrements disponibles en tant que paramètre out.
UTILISEZ 'BucketList'; DROP procedure IF EXISTS 'sp_GetWishByUser'; DELIMITER $$ USE 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetWishByUser' (IN p_user_id bigint, IN p_limit int, IN p_offset int, out p_total bigint) BEGIN sélectionner le nombre (*) dans p_total de tbl_w où wish_user_id = p_user_id; SET @ t1 = CONCAT ('select * from tbl_wish où wish_user_id =', p_user_id, 'commande par wish_date desc limite', p_limit, 'offset', p_offset); PREPARE stmt FROM @ t1; EXECUTE stmt; DEALLOCATE PREPARE stmt; FIN $$ DELIMITER;Comme indiqué dans la procédure stockée modifiée ci-dessus, nous avons ajouté un nouveau paramètre de sortie appelé p_total et sélectionné le nombre total de souhaits en fonction de l'ID utilisateur.
Également modifier le getWish méthode python pour passer un paramètre de sortie.
_limit = pageLimit _offset = request.form ['offset'] _total_records = 0 con = mysql.connect () curseur = con.cursor () curseur.callproc ('sp_GetWishByUser', (_ utilisateur, _limit, _offset, _total_records) souhaite * cursor.fetchall () cursor.close () cursor = con.cursor () cursor.execute ('SELECT @ _sp_GetWishByUser_3'); outParam = cursor.fetchall () Comme vous pouvez le constater dans le code ci-dessus, une fois que nous avons appelé la procédure stockée, nous fermons le curseur et ouvrons un nouveau curseur pour sélectionner le paramètre renvoyé..
Plus tôt, nous renvoyions une liste de souhaits de la méthode Python. Maintenant, nous devons également inclure le nombre total d'enregistrements dans le JSON renvoyé. Nous allons donc créer le dictionnaire de la liste de souhaits dans une autre liste, puis ajouter la liste de souhaits et le nombre d'enregistrements à la liste principale. Voici le code modifié du getWish méthode python.
response = [] souhaits_dict = [] pour le souhait dans souhait: wish_dict = 'Id': souhait [0], 'Titre': souhait [1], 'Description': souhait [2], 'Date': souhait [4 ] Wish_dict.append (Wish_dict) response.append (Wish_dict) response.append ('total': outParam [0] [0]) renvoie json.dumps (réponse). dans le GetWishes Fonction JavaScript, dans le rappel de réussite, ajouter un journal de console.
console.log (res);
Enregistrez toutes les modifications ci-dessus et redémarrez le serveur. Connectez-vous à l'aide d'une adresse e-mail et d'un mot de passe valides et, lorsque vous êtes sur la page d'accueil de l'utilisateur, vérifiez la console du navigateur. Vous devriez pouvoir voir une réponse semblable à celle présentée ci-dessous:
[["Date": "Dim 15 février 2015 15:10:45 GMT", "Description": "wwe", "Id": 5, "Titre": "wwe", "Date": " Samedi, 24 Jan 2015 00:13:50 GMT "," Description ":" Voyage en Espagne "," Id ": 4," Titre ":" Espagne "], " total ": 5]
En utilisant le nombre total reçu de la réponse, nous pouvons obtenir le nombre total de pages.
var total = wishObj [1] ['total']; var pageCount = total / itemsPerPage;
Diviser le nombre total d'articles de objets par page count nous donne le nombre de pages requis. Mais cela n’est vrai que lorsque le total est un multiple de objets par page. Si ce n'est pas le cas, nous devrons vérifier cela et gérer le nombre de pages en conséquence..
var pageRem = total% itemsPerPage; if (pageRem! = 0) pageCount = Math.floor (pageCount) +1;
Cela nous donnera le nombre de pages correct.
Maintenant que nous avons le nombre total de pages, nous allons créer la pagination HTML dynamiquement. Retirer le LI élément de la pagination HTML que nous avons ajouté précédemment.
dans le GetWishes Rappel du succès, créons dynamiquement le lien précédent à l'aide de jQuery.
var prevLink = $ ('') .append ($ ('') .attr (' href ':' # ', ' aria-label ':' Previous ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' '' ')))); $ ('. pagination'). append (prevLink);Dans le code ci-dessus, nous venons de créer le lien de bouton précédent et de l'ajouter à la pagination UL..
Enregistrez les modifications ci-dessus et redémarrez le serveur. En cas de connexion réussie, vous devriez pouvoir voir le lien précédent dans la liste..
De même, ajoutons les pages dans la pagination en fonction du nombre de pages.
pour (var i = 0; i < pageCount; i++) var page = $('') .append ($ ('') .attr (' href ',' # '). text (i + 1)); $ ('. pagination'). append (page); Ajoutons également le lien Suivant après que le lien des pages ait été ajouté..
var nextLink = $ ('') .append ($ ('') .attr (' href ':' # ', ' aria-label ':' Next ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' '' ')))); $ ('. pagination'). append (nextLink);Enregistrez les modifications et redémarrez le serveur. Connectez-vous en utilisant une adresse email et un mot de passe valides. Une fois sur la page d'accueil de l'utilisateur, vous devriez pouvoir voir la pagination..
Vient maintenant la logique principale qui rendra notre pagination fonctionnelle. Nous allons attacher un appel d’événement click sur chaque index de page pour appeler le GetWishes Fonction JavaScript. Commençons par associer un événement click à l'élément d'ancrage affichant le numéro de page..
pour (var i = 0; i < pageCount; i++) var aPage = $('') .attr (' href ',' # '). text (i + 1); $ (aPage) .click (function () ); var page = $ ('') .append (aPage); $ ('. pagination'). append (page); Nous avons donc simplement attaché un événement onclick à l'ancre de la page. A chaque clic, nous appellerons le GetWishes fonction et passe le décalage. Alors déclarez le décalage en dehors de la boucle.
var offset = 0;
Appeler le GetWishes fonction dans l'appel d'événement click.
GetWishes (offset);
Également augmenter le décalage basé sur le nombre d'enregistrements affichés.
offset = offset + 2;
Mais à chaque fois le GetWishes fonction est appelée, la valeur de décalage sera toujours le dernier ensemble. Nous allons donc utiliser JavaScript Closures pour transmettre le décalage correct à la GetWishes une fonction.
var offset = 0; pour (var i = 0; i < pageCount; i++) var aPage = $('') .attr (' href ',' # '). text (i + 1); $ (aPage) .click (fonction (offset) retour function () GetWishes (offset); (offset)); var page = $ ('') .append (aPage); $ ('. pagination'). append (page); offset = offset + itemsPerPage; Enregistrez toutes les modifications ci-dessus et redémarrez le serveur. Connectez-vous avec des identifiants valides et une fois sur la page d'accueil de l'utilisateur, essayez de cliquer sur les pages dans la pagination UL..
Ensuite, nous allons implémenter les liens de page précédents et suivants. Cela peut sembler un peu compliqué, alors laissez-moi vous expliquer un peu avant de commencer avec la mise en œuvre.
Nous afficherons cinq pages à la fois. En utilisant les liens suivant et précédent, l’utilisateur peut accéder aux cinq et cinq pages précédentes. Nous allons stocker les valeurs de la page de démarrage et de la page de fin et continuer à mettre à jour le clic sur le bouton précédent et suivant. Commençons donc par ajouter deux champs cachés à la userHome.html page.
dans le GetWishes rappel de succès, après avoir vidé le .pagination UL, ajoutez la ligne de code suivante pour obtenir la dernière page de démarrage et la dernière page.
$ ('. pagination'). empty (); var pageStart = $ ('# hdnStart'). val (); var pageEnd = $ ('# hdnEnd'). val ();Aucun lien de bouton précédent ne sera affiché lors de l'affichage des pages 1 à 5. Si le nombre de pages affichées est supérieur à 5, nous afficherons le lien de bouton précédent..
if (pageStart> 5) var aPrev = $ ('') .attr (' href ':' # ', ' aria-label ':' Previous ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' '' ')); $ (aPrev) .click (function () // Logique du bouton précédent); var prevLink = $ ('') .append (aPrev); $ ('. pagination'). append (prevLink); Lorsque l'utilisateur clique sur le bouton précédent, nous réinitialisons le hdnStart et hdnEnd valeurs et appelez le GetWishes Fonction JavaScript.
$ (aPrev) .click (function () $ ('# hdnStart'). val (Number (pageStart) - 5); $ ('# hdnEnd'). val (Number (pageStart) - 5 + 4); GetWishes (Numéro (pageStart) - 5););Ensuite, en fonction de la page de démarrage et de la page de fin, nous allons boucler et créer les liens de page, puis ajouter le .pagination UL.
pour (var i = Number (pageStart); i <= Number(pageEnd); i++) if (i > pageCount) break; var aPage = $ ('') .attr (' href ',' # '). text (i); // Attache l'événement de clic de page $ (aPage) .click (function (i) return function () GetWishes (i); (i)); var page = $ ('') .append (aPage); // attache la classe de page active if ((_page) == i) $ (page) .attr ('classe', 'active'); $ ('. pagination'). append (page); En comparant le nombre total de pages et la valeur de début de page, nous déciderons de l’affichage du lien du bouton suivant..
if ((Number (pageStart) + 5)) <= pageCount) var nextLink = $('') .append ($ ('') .attr (' href ':' # ', ' aria-label ':' Next ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' »'). click (function () $ (' # hdnStart '). val (Number (pageStart) + 5); $ (' #hdnEnd '). val (Number (pageStart) + 5 + 4); GetWishes (Number (pageStart) + 5);))); $ ('. pagination'). append (nextLink); Comme indiqué dans le code ci-dessus, lors du clic suivant, nous réinitialisons le hdnStart et hdnEnd bouton valeurs et appelant le GetWishes Fonction JavaScript.
Alors voici la finale GetWishes Fonction JavaScript.
fonction GetWishes (_page) var _offset = (_page - 1) * 2; $ .ajax (url: '/ getWish', type: 'POST', données: offset: _offset, succès: fonction (res) var itemsPerPage = 2; var wishObj = JSON.parse (res); $ ( '#ulist'). empty (); $ ('# listTemplate'). tmpl (wishObj [0]). appendTo ('# ulist'); var total = wishObj [1] ['total']; var pageCount = total / itemsPerPage; var pageRem = total% itemsPerPage; if (pageRem! = 0) pageCount = Math.floor (pageCount) + 1; $ ('. pagination'). empty (); var pageStart = $ ('# hdnStart '). val (); var pageEnd = $ (' # hdnEnd '). val (); if (pageStart> 5) var aPrev = $ ('') .attr (' href ':' # ', ' aria-label ':' Previous ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' '' ')); $ (aPrev) .click (function () $ ('# hdnStart'). val (Number (pageStart) - 5); $ ('# hdnEnd'). val (Number (pageStart) - 5 + 4); GetWishes (Numéro (pageStart) - 5);); var prevLink = $ ('') .append (aPrev); $ ('. pagination'). append (prevLink); pour (var i = Number (pageStart); i <= Number(pageEnd); i++) if (i > pageCount) break; var aPage = $ ('') .attr (' href ',' # '). text (i); $ (aPage) .click (fonction (i) return fonction () GetWishes (i); (i)); var page = $ ('') .append (aPage); if ((_page) == i) $ (page) .attr ('classe', 'actif'); $ ('. pagination'). append (page); if ((Number (pageStart) + 5) <= pageCount) var nextLink = $('') .append ($ ('') .attr (' href ':' # ', ' aria-label ':' Next ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' »'). click (function () $ (' # hdnStart '). val (Number (pageStart) + 5); $ (' #hdnEnd '). val (Number (pageStart) + 5 + 4); GetWishes (Number (pageStart) + 5);))); $ ('. pagination'). append (nextLink); , erreur: fonction (erreur) console.log (erreur); ); Enregistrez toutes les modifications ci-dessus et redémarrez le serveur. Connectez-vous en utilisant une adresse email et un mot de passe valides. Vous devriez pouvoir voir la pagination entièrement fonctionnelle pour la liste de souhaits des utilisateurs..
Dans cette partie de la série, nous avons implémenté la fonctionnalité de pagination pour la liste de souhaits sur la page d'accueil de l'utilisateur. Nous avons vu comment récupérer des données en utilisant une procédure stockée MySQL et créer une pagination en utilisant ces données, jQuery et Bootstrap.
Dans la suite de cette série de didacticiels, nous allons implémenter la fonctionnalité de téléchargement de fichier dans notre application..
Le code source de ce tutoriel est disponible sur GitHub.
Faites-nous savoir vos pensées dans les commentaires ci-dessous!
