Share
În partea anterioară a acestei serii, am văzut cum să implementăm Editați | × și Șterge dorim funcționalitate pentru aplicația noastră pentru cupă. În această parte vom implementa funcționalitatea de paginare pentru lista noastră de utilizatori.
Să începem prin clonarea părții anterioare a tutorialului de la GitHub.
git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part4.git
Odată ce codul sursă a fost clonat, navigați la directorul de proiect și porniți serverul web.
cd PythonFlaskMySQLApp_Part4 Python app.py
Punctați browser-ul dvs. la http: // localhost: 5002 / și ar trebui să aveți aplicația să ruleze.
Pe măsură ce lista dorințelor de pe pagina de pornire a utilizatorului crește, devine derulată în jos. Deci, este important să implementați paginarea. Vom limita numărul de elemente afișate pe o pagină la un anumit număr.
Vom începe prin modificarea sp_GetWishByUser procedura pentru a returna rezultatele bazate pe limită și ofset valoare. De data aceasta vom crea dinamic declarația procedurii stocate pentru a returna setul de rezultate pe baza limitei și a valorii offset. Aici este modificat sp_GetWishByUser MySQL procedură stocată.
USE 'BucketList'; Procedura DROP DACĂ EXISTĂ "sp_GetWishByUser"; DELIMITER $$ UTILIZARE 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURA 'sp_GetWishByUser' (IN p_user_id bigint, IN p_limit int, IN p_offset int) BEGIN SET @ t1 = CONCAT = ', p_user_id,' order by request_date desc limită ', p_limit,' offset ', p_offset); PREPAREA stmt FROM @ t1; EXECUTE stmt; DEALLOCATE PREPARE stmt1; END $$ DELIMITER;
Așa cum am văzut în procedura stocată mai sus, am creat interogarea SQL dinamică și l-am executat pentru a obține lista de dorințe bazată pe ofset și limită parametrii.
Mai întâi, să definim câteva setări implicite. În app.py adăugați o variabilă pentru limita paginii.
# Setare implicită pageLimit = 2
Fă getWish metoda python acceptă solicitările POST.
@ App.route ( '/ getWish', metode = [ 'POST'])
Citeste ofset și limită în interiorul getWish și îl transmiteți în timp ce apelați procedura stocată MySQL sp_GetWishByUser.
Accentsconagua
_limit = pageLimit _offset = request.form ['offset'] con = mysql.connect () cursor = con.cursor () cursor.callproc (' Modificați GetWishes Funcția JavaScript în userHome.html pentru a face o cerere POST și a trece ofset valoare.
funcția (res) var wishObj = JSON.parse (res); $ ((res. "error": funcția (eroare) console.log (eroare);) ("#" ; Salvați toate modificările și reporniți serverul. Conectați-vă utilizând o adresă de e-mail și o parolă valabilă și ar trebui să aveți doar două înregistrări afișate pe ecran.
Deci, porțiunea bazei de date funcționează bine. Apoi, trebuie să adăugăm interfața de paginare la pagina de pornire a utilizatorului, care va permite utilizatorului să navigheze prin intermediul datelor.
Vom folosi componenta de paginare Bootstrap. Deschide userHome.html și adăugați următorul cod HTML după #ulist UL.
Salvați modificările și reporniți serverul. După ce vă conectați cu succes, ar trebui să puteți vedea paginarea în lista de dorințe.
Pagingul de mai sus este modul în care va arăta paginarea noastră. Dar, pentru ao face funcțională, trebuie să creăm dinamic paginarea în funcție de numărul de înregistrări din baza de date.
Pentru a crea paginarea noastră, vom avea nevoie de numărul total de înregistrări disponibile în baza de date. Deci, haideți să modificăm procedura stocată MySQL sp_GetWishByUser pentru a returna numărul total de înregistrări disponibile ca parametru de ieșire.
USE 'BucketList'; Procedura DROP DACĂ EXISTĂ "sp_GetWishByUser"; DELIMITER $$ UTILIZARE 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURA 'sp_GetWishByUser' (IN p_user_id bigint, IN p_limit int, IN p_offset int, out p_total bigint) BEGIN select count (*) in p_total din tbl_wish unde wish_user_id = p_user_id; SET @ t1 = CONCAT ('selectați * din tbl_wish unde wish_user_id =', p_user_id, 'order by request_date desc limită', p_limit, 'offset', p_offset); PREPAREA stmt FROM @ t1; EXECUTE stmt; DEALLOCATE PREPARE stmt; END $$ DELIMITER;Așa cum am văzut în procedura stocată modificată mai sus, am adăugat un nou parametru de ieșire numit p_total și a selectat numărul total de dorințe pe baza id-ului de utilizator.
Modificați și getWish metoda python pentru a trece un parametru de ieșire.
_limit = pageLimit _offset = request.form ['offset'] _total_records = 0 con_ mysql.connect () cursor = con.cursor () cursor.callproc (' cursor.fetchall () cursor.close () cursor = con.cursor () cursor.execute ('SELECT @ _sp_GetWishByUser_3'); outParam = cursor.fetchall () După cum puteți vedea în codul de mai sus, odată ce am sunat procedura stocată, închidem cursorul și deschidem un nou cursor pentru a selecta parametrul returnat.
Anterior, revenim o listă de dorințe din metoda Python. Acum, trebuie să includem și numărul total de înregistrări în JSON-ul returnat. Deci vom face dicționarul listei de dorințe într-o altă listă și apoi vom adăuga lista de dorințe și numărul de înregistrări în lista principală. Aici este codul modificat al getWish metoda python.
răspunsul = [] wishes_dict = [] pentru dorință în dorințe: wish_dict = 'Id': wish [0], 'Title': wish [1], 'Description': wish [2] ] wishes_dict.append (request_dict) răspuns.append (wishes_dict) răspuns.append ('total': outParam [0] [0]) return json.dumps În GetWishes Funcția JavaScript, în cadrul callback-ului de succes adăugați un jurnal de console.
console.log (res);
Salvați toate modificările de mai sus și reporniți serverul. Conectați-vă utilizând o adresă de e-mail și o parolă validă, iar în pagina de pornire a utilizatorului, verificați consola browserului. Ar trebui să puteți vedea un răspuns similar celui prezentat mai jos:
["Date": "Sună, 15 Feb 2015 15:10:45 GMT", "Descriere": "wwe", "Id": 5, Sat, 24 Jan 2015 00:13:50 GMT "," Descriere ":" Călătorie în Spania "," Id ": 4," Titlu ":" Spania "], " total ": 5]
Folosind numărul total primit de răspuns, putem obține numărul total de pagini.
var total = dorințăObj [1] ['total']; var pageCount = total / itemsPerPage;
Împărțirea numărului total de elemente de la articole pe pagină numără numărul de pagini solicitate. Dar acest lucru este valabil numai atunci când totalul este un multiplu de articole pe pagină. Dacă nu este cazul, va trebui să verificăm acest lucru și să rezolvăm numărul paginilor în consecință.
var paginaRem = total% itemsPerPage; dacă (pageRem! = 0) pageCount = Math.floor (pageCount) +1;
Deci, asta ne va da numărul corect de pagini.
Acum, deoarece avem numărul total de pagini, vom crea dinamic paginarea HTML. Scoateți LI element din HTML-ul de paginare pe care l-am adăugat mai devreme.
În GetWishes reușită, să creați dinamic linkul anterior utilizând jQuery.
var prevLink = $ ('') .Append ($ ('') .attr (' href ':' # ', ' aria-label ':'') .attr (' aria-ascuns ',' adevărat '). html (' «'))); $ ( 'Paginare') append (prevLink).;În codul de mai sus, am creat doar legătura butonului anterior și l-am adăugat la paginile UL.
Salvați modificările de mai sus și reporniți serverul. La conectarea cu succes, ar trebui să puteți vedea linkul anterior din listă.
În mod similar, să adăugăm paginile în paginare pe baza numărului de pagini.
pentru (var i = 0; i < pageCount; i++) var page = $('') .Append ($ ('') .attr (' href ',' # '). text (i + 1)); $ ( 'Paginare') append (pag.); Să adăugăm, de asemenea, linkul Următorul după adăugarea link-ului paginilor.
var nextLink = $ ('') .Append ($ ('') .attr (' href ':' # ', ' aria-label ':'') .attr (' aria-ascuns ',' adevărat '). html (' »'))); $ ( 'Paginare') append (nextLink).;Salvați modificările și reporniți serverul. Conectați-vă utilizând o adresă de e-mail și o parolă validă și, o dată pe pagina de pornire a utilizatorului, ar trebui să vedeți paginarea.
Acum vine principala logică care va face paginarea noastră funcțională. Ceea ce vom face este să atașați un apel de eveniment clic pe fiecare index al paginii pentru a apela GetWishes Funcția JavaScript. Să atașăm mai întâi un eveniment clic pe elementul de ancorare care afișează numărul paginii.
pentru (var i = 0; i < pageCount; i++) var aPage = $('') .attr (' href ',' # '). text (i + 1); $ (aPage) .click (funcția () ); var pagina = $ ('„) .Append (aPage); $ ( 'Paginare') append (pag.); Așa că am atașat un eveniment onclick la ancora de pagină. La fiecare clic se va apela GetWishes funcționează și trece ofset. Deci, declarați ofset în afara bucla pentru.
var offset = 0;
Suna GetWishes funcția în interiorul apelului evenimentului clic.
GetWishes (offset);
De asemenea, creșteți valoarea ofset pe baza numărului de înregistrări afișate.
offset = offset + 2;
Dar de fiecare dată GetWishes se numește funcția, valoarea lui ofset va fi întotdeauna ultima setată. Deci, vom folosi JavaScript Closures pentru a trece offsetul corect la GetWishes funcţie.
var offset = 0; pentru (var i = 0; i < pageCount; i++) var aPage = $('') .attr (' href ',' # '). text (i + 1); $ (aPage) .click (functie (offset) functie return () GetWishes (offset); (offset)); var pagina = $ ('„) .Append (aPage); $ ( 'Paginare') append (pag.); offset = offset + itemsPerPage; Salvați toate modificările de mai sus și reporniți serverul. Conectați-vă utilizând acreditările valide și o dată pe pagina de pornire a utilizatorului, încercați să faceți clic pe paginile din UL de paginare.
Apoi vom implementa legăturile anterioare și următoare. Poate părea un pic complicat, așa că permiteți-mi să-i explic puțin înainte de a începe implementarea.
Vom afișa câte cinci pagini în același timp. Folosind linkul următor și anterior, utilizatorul poate naviga la următoarele cinci și, respectiv, cinci pagini anterioare. Vom stoca valorile paginii de start și a paginii de final și vom continua să actualizăm atât la clicul butonului următor, cât și la cel anterior. Deci, haideți să începem prin adăugarea a două câmpuri ascunse la userHome.html pagină.
În GetWishes reușită, după ce am golit .paginare UL, adăugați următoarea linie de cod pentru a obține cea mai recentă pagină de start și pagina finală.
$ ( 'Paginare') gol ().; var paginaStart = $ ('# hdnStart') val (); var paginaEnd = $ ('# hdnEnd') val ();Nu se afișează nicio legătură cu butoanele anterioare când se afișează paginile de la 1 la 5. Dacă paginile afișate sunt mai mari de 5, atunci vom afișa legătura cu butoanele anterioare.
dacă (paginaStart> 5) var aPrev = $ ('') .attr (' href ':' # ', ' aria-label ':'') .attr (' aria-ascuns ',' adevărat '). html (' '')); $ (aPrev). clic (funcția () // logica precedentă a butonului)); var prevLink = $ ('„) .Append (aPrev); $ ( 'Paginare') append (prevLink).; Când utilizatorul face clic pe butonul anterior, vom reinițializa hdnStart și hdnEnd și apelați GetWishes Funcția JavaScript.
$ ('# hdnEnd') val (Numar (paginaStart) - 5 + 4); GetWishes (Număr (paginaStart) - 5););Apoi, bazându-ne pe pagina de start și pe pagina finală, vom face buclă și vom crea link-urile paginii și vom adăuga .paginare UL.
pentru (var i = Număr (paginaStart); i <= Number(pageEnd); i++) if (i > pagecount) break; var aPage = $ ('') .attr (' href ',' # '). text (i); // atașați evenimentul de clic pagină $ (aPage) .click (funcția (i) return function () GetWishes (i); (i)); var pagina = $ ('„) .Append (aPage); // Atașați clasa activă a paginii dacă ((_page) == i) $ (page) .attr ('class', 'active'); $ ('paginare'). Prin compararea numărului total de pagini și a valorii de pornire a paginii, vom decide afișarea următorului link de buton.
dacă ((Număr (paginaStart) + 5) <= pageCount) var nextLink = $('') .Append ($ ('') .attr (' href ':' # ', ' aria-label ':'') .attr (' aria-ascuns ',' adevărat '). html (' #hdnEnd ') val (număr (pagină de start) + 5 + 4); GetWishes (număr (paginăStart) + 5);))); $ ( 'Paginare') append (nextLink).; Așa cum se vede în codul de mai sus, pe următorul buton de clic, suntem resetați hdnStart și hdnEnd butoanele și apelarea GetWishes Funcția JavaScript.
Deci aici este finalul GetWishes Funcția JavaScript.
funcția GetWishes (_page) var _offset = (_page - 1) * 2; $ .ajax (url: '/ getWish', tip: 'POST', date: offset: _offset, succes: function (res) var itemsPerPage = 'var'); $ ('# listTemplate'); tmpl (requestObj [0]) .appendTo ('# ulist' (paginaRem! = 0) pageCount = Math.floor (pageCount) + 1; $ ('paginare') empty pageStart = $ (' hdnStart ') val (); var paginaEnd = $ (' # hdnEnd ') val (); if (paginaStart> 5) var aPrev = $ ('') .attr (' href ':' # ', ' aria-label ':'') .attr (' aria-ascuns ',' adevărat '). html (' '')); $ ('# hdnEnd') val (Numar (paginaStart) - 5 + 4); GetWishes (Număr (paginaStart) - 5);); var prevLink = $ ('„) .Append (aPrev); $ ( 'Paginare') append (prevLink).; pentru (var i = Număr (paginaStart); i <= Number(pageEnd); i++) if (i > pagecount) break; var aPage = $ ('') .attr (' href ',' # '). text (i); $ (aPage) .click (funcția (i) funcția return () GetWishes (i); (i)); var pagina = $ ('„) .Append (aPage); dacă ((_page) == i) $ (pagina) .attr ("clasă", "activă"); $ ('paginare'). dacă ((Număr (PageStart) + 5) <= pageCount) var nextLink = $('') .Append ($ ('') .attr (' href ':' # ', ' aria-label ':'') .attr (' aria-ascuns ',' adevărat '). html (' #hdnEnd ') val (număr (pagină de start) + 5 + 4); GetWishes (număr (paginăStart) + 5);))); $ ( 'Paginare') append (nextLink).; , eroare: funcție (eroare) console.log (eroare); ); Salvați toate modificările de mai sus și reporniți serverul. Conectați-vă utilizând o adresă de e-mail și o parolă valide. Ar trebui să puteți vedea paginarea pe deplin funcțională pentru lista dorințelor de utilizator.
În această parte a seriei am implementat funcția de paginare pentru lista de dorințe pe pagina de pornire a utilizatorului. Am văzut cum să preluăm datele utilizând o procedură stocată în MySQL și să creăm paginarea utilizând datele respective, jQuery și Bootstrap.
În următoarea parte a acestei serii de tutori, vom implementa funcția de încărcare a fișierelor în aplicația noastră.
Codul sursă din acest tutorial este disponibil pe GitHub.
Spuneți-ne gândurile dvs. în comentariile de mai jos!
