Theory
तीस events, एक endless scroll
FestConnect अब 30 events list करता है। सभी 30 को एक page पर दिखाना मतलब एक थका हुआ thumb हमेशा के लिए scroll करता रहे, और 'मैं कहाँ हूँ' का कोई सेंस नहीं। सामान्य fix है 10 प्रति page दिखाना नीचे एक छोटे numbered bar के साथ: Previous, 1, 2, 3, Next।
Bootstrap के पास exactly उस bar के लिए एक ready-made component है। यह बस specific classes वाली एक unordered list है, तो एक बार shape पता हो आप इसे memory से बना सकते हैं।
Theory
एक filing folder पर tabs
एक मोटी paper file numbered tabs से sections में बँटी होती है जो साइड से निकलते हैं। आप सारे sections एक साथ नहीं पढ़ते; आप एक tab पर flip करते हैं। Pagination एक web list के लिए वे tabs हैं: हर number results के एक slice का एक tab है, current tab highlighted है, और एक tab जिसे आप अभी इस्तेमाल नहीं कर सकते (Previous, जब आप पहले से page 1 पर हैं) greyed out है।
Theory
Structure
Pagination तीन fixed class layers वाली एक list है:
- `<ul class="pagination">`: bar।
- `<li class="page-item">`: एक page slot।
- `<a class="page-link">`: इसके अंदर clickable number।
दो state classes `page-item` (<li>) पर जाती हैं, link पर नहीं:
- `.active`: current page (highlighted)।
- `.disabled`: एक link जो अभी इस्तेमाल नहीं हो सकती (greyed, clickable नहीं)।
Follow along
FestConnect pager बनाइए (page 2 of 3)
- एक <ul class="pagination"> खोलिए यह वह bar है जो हर page slot रखता है
- एक disabled Previous जोड़िए page 1 पर आप इसे class="page-item disabled" देंगे; page 2 पर यह active-able है
- हर number के लिए एक page-item जोड़िए <li class="page-item"><a class="page-link" href="?page=1">1</a></li>
- Current page को active mark कीजिए page 2 वाले li को class="page-item active" मिलता है
- एक Next page-item जोड़िए same shape, इसका link ?page=3 पर point करता है
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" डालता है और highlight ग़लत दिखता है। .active (और .disabled) को actually किस element पर बैठना चाहिए, और यह क्यों matter करता है?
Show the answer
`<li class="page-item">` पर, <a class="page-link"> पर नहीं। Bootstrap का pagination CSS item slot को active या disabled style करता है (background, border, pointer)। इसे link पर डालना वे rules miss कर देता है। सही: <li class="page-item active"> जो एक normal <a class="page-link"> को wrap करे। disabled के लिए भी same rule।
Quiz
FestConnect list के page 1 पर, 'Previous' link कैसा दिखना चाहिए, और आप इसे कैसे achieve करते हैं?
- Greyed और unclickable, इसके page-item में disabled जोड़कर
- Highlighted, इसके page-item में active जोड़कर
- Hidden, पूरी pagination list delete करके
- Blue और clickable, बिल्कुल number links जैसा
Show the answer
Greyed और unclickable, इसके page-item में disabled जोड़कर
Page 1 पर कोई previous page नहीं है, तो 'Previous' greyed और non-interactive होना चाहिए: <li class="page-item disabled"> (A)। active (B) current page number के लिए है, Previous के लिए नहीं। List delete करना (C) navigation पूरी तरह हटा देता है। इसे clickable छोड़ना (D) users को एक ऐसे page में click करने देगा जो exist नहीं करता। disabled बताता है 'आप शुरुआत में हैं'।
Watch out
Pagination traps
1. State classes ग़लत element पर: active/disabled page-item <li> पर होते हैं, page-link <a> पर नहीं।
2. List structure skip करना: यह ul > li.page-item > a.page-link होना ज़रूरी है। खाली <a> tags page-link के साथ bar में align नहीं होंगे।
3. यह सोचना pagination data load करता है: यह सिर्फ़ visual bar है। असल में page 2 के दस events fetch करना server-side या JavaScript काम है; bar सिर्फ़ ?page=2 से link करता है।
Theory
href page number ले जाता है
देखिए href="?page=2": यह Unit 1 forms lesson से GET query string है। Server (या बाद में, आपकी JavaScript) page=2 पढ़ता है और सही दस events return करता है। Pagination, GET parameters, और grid जो आपने पहले बनाया, सब मिलकर एक browsable event list में click हो जाते हैं।
Summary
Key takeaways
- Pagination है <ul class="pagination"> > <li class="page-item"> > <a class="page-link">।
- .active (current page) और .disabled (unusable link) को page-item <li> पर रखिए, link पर नहीं।
- Page 1 पर, Previous को disabled mark कीजिए; current number को active मिलता है।
- Bar सिर्फ़ presentation है; data का सही slice load करना server या JS काम है।
- Links एक GET query से page ले जाते हैं जैसे ?page=2।
- Memory hook: एक filing folder पर numbered tabs।