Pagination

📖 Theory

ત્રીસ events, એક અંતહીન scroll

FestConnect હવે 30 events ની યાદી આપે છે. એક જ પાના પર ત્રીસેત્રીસ દેખાડવાનો અર્થ છે થાકેલો અંગૂઠો કાયમ scroll કરતો રહે, અને 'હું ક્યાં છું' નો કોઈ ખ્યાલ નહીં. સામાન્ય ઉકેલ છે પાના દીઠ 10 દેખાડવા અને નીચે નાની ક્રમાંકિત પટ્ટી મૂકવી: Previous, 1, 2, 3, Next.

બરાબર એ પટ્ટી માટે Bootstrap પાસે તૈયાર ઘટક છે. એ ફક્ત ચોક્કસ classes વાળી ક્રમ વગરની યાદી છે, એટલે એક વાર આકાર આવડે પછી તમે એને યાદશક્તિથી બનાવી શકો.

📖 Theory

ફાઇલના ખાનાં પરની પટ્ટીઓ

જાડી કાગળની ફાઇલ બાજુમાંથી બહાર નીકળતી ક્રમાંકિત પટ્ટીઓથી વિભાગોમાં વહેંચાયેલી હોય છે. તમે બધા વિભાગ એકસાથે વાંચતા નથી; તમે એક પટ્ટી પર જાઓ છો. Pagination એ web ની યાદી માટે એ પટ્ટીઓ છે: દરેક આંકડો પરિણામોના એક ટુકડા સુધીની પટ્ટી છે, હાલની પટ્ટી ઉજાગર થયેલી છે, અને અત્યારે તમે ન વાપરી શકો એવી પટ્ટી (Previous, જ્યારે તમે પહેલેથી પાનું 1 પર જ છો) ઝાંખી કરેલી છે.

📖 Theory

રચના

Pagination એ ત્રણ નિશ્ચિત class ના સ્તરવાળી યાદી છે:

• `<ul class="pagination">`: પટ્ટી.
• `<li class="page-item">`: પાનાનું એક ખાનું.
• `<a class="page-link">`: એની અંદરનો click થાય એવો આંકડો.

બે અવસ્થાના classes `page-item` (એટલે કે <li>) પર જાય છે, link પર નહીં:

• `.active`: હાલનું પાનું (ઉજાગર).
• `.disabled`: એવી link જે અત્યારે વાપરી ન શકાય (ઝાંખી, click ન થાય એવી).

🪜 Follow along

FestConnect નું pager બનાવો (3 માંનું પાનું 2)

1. એક <ul class="pagination"> ખોલો આ એ પટ્ટી છે જે પાનાનું દરેક ખાનું રાખે છે
2. Disabled કરેલું Previous ઉમેરો પાનું 1 પર તમે એને class="page-item disabled" આપત; પાનું 2 પર એ વાપરી શકાય એવું છે
3. દરેક આંકડા દીઠ એક page-item ઉમેરો <li class="page-item"><a class="page-link" href="?page=1">1</a></li>
4. હાલના પાનાને active ચીંધો પાનું 2 વાળા li ને class="page-item active" મળે છે
5. Next નું page-item ઉમેરો એ જ આકાર, એની link ?page=3 તરફ ચીંધે છે

⌨️ Practical

Pager નું markup

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="?page=1">Previous</a></li>
  <li class="page-item"><a class="page-link" href="?page=1">1</a></li>
  <li class="page-item active"><a class="page-link" href="?page=2">2</a></li>
  <li class="page-item"><a class="page-link" href="?page=3">3</a></li>
  <li class="page-item"><a class="page-link" href="?page=3">Next</a></li>
</ul>

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

.active ક્યાં જાય છે?

એક student <a> પર class="page-link active" મૂકે છે અને ઉજાગર કરવાનું ખોટું દેખાય છે. .active (અને .disabled) ખરેખર કયા element પર બેસવું જોઈએ, અને એ કેમ મહત્ત્વનું છે?

🧩 Quiz

FestConnect ની યાદીના પાના 1 પર, 'Previous' ની link કેવી દેખાવી જોઈએ, અને તમે એ કેવી રીતે સિદ્ધ કરો છો?

1. ઝાંખી અને click ન થાય એવી, એના page-item માં disabled ઉમેરીને
2. ઉજાગર, એના page-item માં active ઉમેરીને
3. છુપાયેલી, આખી pagination ની યાદી કાઢી નાખીને
4. ભૂરી અને click થાય એવી, બરાબર આંકડાની links જેવી

⚠️ Watch out

Pagination ના ફાંદા

1. અવસ્થાના classes ખોટા element પર: active/disabled એ page-item વાળા <li> નાં છે, page-link વાળા <a> નાં નહીં.

2. યાદીની રચના છોડી દેવી: એ ul > li.page-item > a.page-link જ હોવું જોઈએ. page-link વાળાં કોરાં <a> tags પટ્ટીમાં ગોઠવાશે નહીં.

3. Pagination data load કરે છે એવું માનવું: એ ફક્ત દેખાવની પટ્ટી છે. પાના 2 ના દસ events ખરેખર લાવવાનું કામ server-side કે JavaScript નું છે; પટ્ટી તો ફક્ત ?page=2 સાથે જોડે છે.

📖 Theory

href પાનાનો આંકડો વહન કરે છે

href="?page=2" નોંધો: એ Unit 1 ના forms ના પાઠમાંની GET ની query string છે. Server (કે પછી, તમારું JavaScript) page=2 વાંચે છે અને સાચા દસ events પાછા આપે છે. Pagination, GET નાં parameters, અને તમે અગાઉ બાંધેલી grid, બધું ભેગું થઈને એક ફેરવી શકાય એવી events ની યાદી બને છે.

✅ Summary

Key takeaways

• Pagination એ <ul class="pagination"> > <li class="page-item"> > <a class="page-link"> છે.
• .active (હાલનું પાનું) અને .disabled (ન વાપરી શકાય એવી link) એ page-item વાળા <li> પર મૂકો, link પર નહીં.
• પાના 1 પર Previous ને disabled ચીંધો; હાલના આંકડાને active મળે છે.
• પટ્ટી ફક્ત દેખાવ છે; data નો સાચો ટુકડો લાવવાનું કામ server કે JS નું છે.
• Links પાનું ?page=2 જેવી GET ની query થી વહન કરે છે.
• Memory hook: ફાઇલના ખાના પરની ક્રમાંકિત પટ્ટીઓ.