html
Spring Boot में पेजिनेशन और सॉर्टिंग को लागू करना: एक व्यापक गाइड
विषय सूची
- परिचय ………………………………………………………………... 1
- पेजिनेशन और सॉर्टिंग को समझना …………………… 2
- पेजिनेशन क्या है? ………………………………………………… 2
- सॉर्टिंग क्या है? ………………………………………………………… 3
- Spring Boot में पेजिनेशन सेटअप करना ………………… 4
- रिक्वेस्ट पैरामीटर्स को कॉन्फ़िगर करना ………………………… 4
- कंट्रोलर लॉजिक को लागू करना ………………… 6
- सॉर्टिंग को पेजिनेशन के साथ एकीकृत करना ………………………… 9
- पेजिनेशन लिंक्स जनरेट करना …………………………………… 12
- डायनेमिक लिंक्स बनाना …………………………………………… 12
- सक्रिय स्थितियों को संभालना ………………………………………… 14
- Bootstrap के साथ दृश्य को संवर्धित करना ………………………… 17
- Bootstrap पेजिनेशन को शामिल करना …………………… 17
- निष्कर्ष …………………………………………………………………....... 20
परिचय
वेब विकास के क्षेत्र में, बड़ी डेटा सेट्स का कुशल प्रबंधन महत्वपूर्ण है ताकि निर्बाध उपयोगकर्ता अनुभव प्रदान किया जा सके। इसे प्राप्त करने के लिए दो मौलिक तकनीकों का उपयोग किया जाता है: पेजिनेशन और सॉर्टिंग। पेजिनेशन व्यापक डेटा सूचियों को प्रबंधनीय खंडों में विभाजित करता है, जबकि सॉर्टिंग डेटा को विशिष्ट मानदंडों के आधार पर व्यवस्थित करती है, जिससे पहुँच और उपयोगिता में सुधार होता है।
यह ईबुक Spring Boot एप्लिकेशन में पेजिनेशन और सॉर्टिंग को लागू करने में गहराई से जाता है। हम रिक्वेस्ट पैरामीटर्स को कॉन्फ़िगर करना, कंट्रोलर लॉजिक को तैयार करना, सॉर्टिंग मैकेनिज्म को एकीकृत करना, और पेजिनेशन लिंक को डायनेमिक रूप से जेनरेट करना जांचेंगे। फ्रंटएंड संवर्द्धन के लिए Bootstrap का उपयोग सुनिश्चित करता है कि पेजिनेशन इंटरफेस कार्यात्मक और सौंदर्यपूर्ण रूप से आकर्षक दोनों हो।
मुख्य बिंदु
- पेजिनेशन डेटा को पृथक पृष्ठों में विभाजित करता है, लोड समय और उपयोगकर्ता नेविगेशन में सुधार करता है।
- सॉर्टिंग डेटा को निर्दिष्ट फ़ील्ड्स के आधार पर व्यवस्थित करती है, डेटा पुनर्प्राप्ति और विश्लेषण में मदद करती है।
- Spring Boot में इन विशेषताओं को लागू करने में रिक्वेस्ट पैरामीटर्स, कंट्रोलर मेथड्स, और फ्रंटएंड इंटीग्रेशन को कॉन्फ़िगर करना शामिल है।
- Bootstrap का उपयोग करने से पेजिनेशन लिंक के दृश्य प्रस्तुतीकरण में सुधार होता है।
फायदे और नुकसान
विशेषता | फायदे | नुकसान |
---|---|---|
पेजिनेशन | - प्रदर्शन में सुधार - उपयोगकर्ता अनुभव में सुधार |
- अतिरिक्त कार्यान्वयन जटिलता |
सॉर्टिंग | - डेटा विश्लेषण में सुविधा - डेटा सुलभता में सुधार |
- क्वेरी लॉजिक को जटिल बना सकता है |
कब और कहाँ उपयोग करें
- पेजिनेशन उन एप्लिकेशनों के लिए आदर्श है जो बड़े डेटासेट्स को प्रदर्शित करते हैं, जैसे ब्लॉग, ई-कॉमर्स साइट्स, और एडमिन डैशबोर्ड्स।
- सॉर्टिंग आवश्यक है जब उपयोगकर्ताओं को डेटा को तिथि, प्रासंगिकता, नाम, या अन्य संबंधित फ़ील्ड्स के आधार पर व्यवस्थित करने की आवश्यकता होती है।
पेजिनेशन और सॉर्टिंग को समझना
पेजिनेशन क्या है?
पेजिनेशन सामग्री को अलग-अलग पृष्ठों में विभाजित करने की प्रक्रिया है, जिससे बड़ी मात्रा में डेटा के माध्यम से नेविगेट करना आसान हो जाता है। एक साथ सभी रिकॉर्ड्स को लोड करने के बजाय, पेजिनेशन एक उपसमुच्चय को लोड करता है, आमतौर पर प्रति पृष्ठ एक निश्चित संख्या, जिससे प्रदर्शन और उपयोगकर्ता अनुभव दोनों में सुधार होता है।
पेजिनेशन के लाभ
- लोड समय में सुधार: एक साथ लोड होने वाले डेटा की मात्रा को कम करता है।
- उपयोगकर्ता अनुभव में सुधार: उपयोगकर्ताओं को अत्यधिक जानकारी से अभिभूत होने से रोकता है।
- प्रभावी संसाधन प्रबंधन: सर्वर और क्लाइंट-साइड संसाधनों के उपयोग को अनुकूलित करता है।
सॉर्टिंग क्या है?
सॉर्टिंग विशिष्ट मानदंडों के आधार पर डेटा को व्यवस्थित करने की प्रक्रिया है, जैसे वर्णानुक्रम, तिथि, या प्रासंगिकता। यह उपयोगकर्ताओं को डेटा को संरचित और सार्थक तरीके से देखने की अनुमति देता है, जिससे वांछित जानकारी तक त्वरित पहुंच आसान होती है।
सॉर्टिंग के लाभ
- डेटा की उपलब्धता: विशिष्ट रिकॉर्ड्स को खोजना आसान बनाता है।
- विश्लेषण में सुधार: डेटा की तुलना और विश्लेषण में प्रभावी सहायता करता है।
- उपयोगकर्ता सुविधा: डेटा को देखने और उसके साथ इंटरैक्ट करने के तरीकों में लचीलापन प्रदान करता है।
Spring Boot में पेजिनेशन सेटअप करना
Spring Boot एप्लिकेशन में पेजिनेशन को लागू करने में पेजिनेशन इनपुट्स को स्वीकार करने के लिए रिक्वेस्ट पैरामीटर्स को कॉन्फ़िगर करना, कंट्रोलर को इनपुट्स को संभालने के लिए समायोजित करना, और उपयुक्त डेटा उपसमुच्चय को प्राप्त करने के लिए डेटाबेस के साथ इंटरफेस करना शामिल है।
रिक्वेस्ट पैरामीटर्स को कॉन्फ़िगर करना
पेजिनेशन को सक्षम करने के लिए, हमें एप्लिकेशन में offset, perPage, और page जैसे पैरामीटर्स को स्वीकार करने की आवश्यकता है। ये पैरामीटर्स डेटा के उपसमुच्चय को निर्धारित करते हैं जिसे पुनर्प्राप्त और प्रदर्शित किया जाएगा।
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Import necessary packages import org.springframework.web.bind.annotation.RequestParam; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; // Controller Method @GetMapping("/posts") public String getPosts( @RequestParam(value = "soughtBy", required = false, defaultValue = "createdAt") String soughtBy, @RequestParam(value = "perPage", required = false, defaultValue = "5") int perPage, @RequestParam(value = "page", required = false, defaultValue = "1") int page, Model model) { // Controller logic will be implemented here } |
व्याख्या:
- @RequestParam: HTTP रिक्वेस्ट पैरामीटर्स को मेथड पैरामीटर्स से बाइंड करता है।
- soughtBy: यह निर्धारित करता है कि डेटा किस फ़ील्ड के आधार पर सॉर्ट किया जाता है। यह वैकल्पिक है और डिफ़ॉल्ट रूप से
createdAt
पर सेट होता है। - perPage: प्रति पृष्ठ रिकॉर्ड्स की संख्या निर्दिष्ट करता है। यह वैकल्पिक है और डिफ़ॉल्ट रूप से
5
पर सेट होता है। - page: वर्तमान पृष्ठ संख्या को इंगित करता है। यह वैकल्पिक है और डिफ़ॉल्ट रूप से
1
पर सेट होता है।
कंट्रोलर लॉजिक को लागू करना
कंट्रोलर पेजिनेशन पैरामीटर्स को संसाधित करने, वांछित डेटा उपसमुच्चय को प्राप्त करने के लिए सेवा लेयर के साथ इंटरैक्ट करने, और दृश्य के लिए मॉडल एट्रीब्यूट्स को तैयार करने के लिए जिम्मेदार है।
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Sort; @GetMapping("/posts") public String getPosts( @RequestParam(value = "soughtBy", required = false, defaultValue = "createdAt") String soughtBy, @RequestParam(value = "perPage", required = false, defaultValue = "5") int perPage, @RequestParam(value = "page", required = false, defaultValue = "1") int page, Model model) { // Adjust page number for zero-based indexing int currentPage = page - 1; // Create PageRequest object PageRequest pageRequest = PageRequest.of(currentPage, perPage, Sort.by(soughtBy).ascending()); // Fetch paginated posts Page<Post> postPage = postService.findAll(pageRequest); // Total pages int totalPages = postPage.getTotalPages(); // Generate page numbers List<Integer> pages = createPageRange(0, totalPages - 1); // Generate pagination links List<String> links = generatePaginationLinks(pages, perPage, soughtBy, currentPage); // Add attributes to the model model.addAttribute("links", links); model.addAttribute("postsOnPage", postPage.getContent()); return "home"; } // Helper method to create page range private List<Integer> createPageRange(int start, int end) { List<Integer> range = new ArrayList<>(); for (int i = start; i <= end; i++) { range.add(i); } return range; } // Helper method to generate pagination links private List<String> generatePaginationLinks(List<Integer> pages, int perPage, String sortBy, int currentPage) { List<String> links = new ArrayList<>(); for (Integer link : pages) { String active = ""; if (link == currentPage) { active = "active"; } String url = "/posts?perPage=" + perPage + "&page=" + (link + 1) + "&soughtBy=" + sortBy; String htmlLink = "<li class='page-item " + active + "'><a class='page-link' href='" + url + "'>" + (link + 1) + "</a></li>"; links.add(htmlLink); } return links; } |
व्याख्या:
- PageRequest: पेजिनेशन जानकारी का निर्माण करता है, जिसमें पृष्ठ संख्या, आकार, और सॉर्टिंग शामिल है।
- postService.findAll(pageRequest): पेजिनेटेड और सॉर्टेड पोस्ट्स की सूची को प्राप्त करता है।
- createPageRange: कुल पृष्ठों के आधार पर पृष्ठ संख्याओं की सूची उत्पन्न करता है।
- generatePaginationLinks: प्रत्येक पृष्ठ के लिए HTML लिंक बनाता है, वर्तमान पृष्ठ को सक्रिय के रूप में चिह्नित करता है।
- मॉडल एट्रीब्यूट्स:
- links: पेजिनेशन लिंक के लिए HTML स्निपेट्स शामिल हैं।
- postsOnPage: वर्तमान पृष्ठ के लिए पोस्ट्स की सूची रखता है।
सॉर्टिंग को पेजिनेशन के साथ एकीकृत करना
सॉर्टिंग को पेजिनेशन के साथ मिलाने से उपयोगकर्ताओं को वांछित क्रम में डेटा उपसमुच्चयों को देखने की अनुमति देकर डेटा पुनर्प्राप्ति को बढ़ाता है। इस एकीकरण में सॉर्ट पैरामीटर्स को पार्स करना और डेटा पुनर्प्राप्ति के दौरान उन्हें लागू करना शामिल है।
सॉर्ट पैरामीटर्स को पार्स करना और लागू करना
सॉर्टिंग को लागू करने के लिए, हम कंट्रोलर को soughtBy पैरामीटर स्वीकार करने के लिए संशोधित करते हैं, जो यह निर्धारित करता है कि डेटा किस फ़ील्ड के आधार पर सॉर्ट किया जाता है।
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// Updated Controller Method @GetMapping("/posts") public String getPosts( @RequestParam(value = "soughtBy", required = false, defaultValue = "createdAt") String soughtBy, @RequestParam(value = "perPage", required = false, defaultValue = "5") int perPage, @RequestParam(value = "page", required = false, defaultValue = "1") int page, Model model) { int currentPage = page - 1; // Apply sorting based on soughtBy parameter PageRequest pageRequest = PageRequest.of(currentPage, perPage, Sort.by(soughtBy).ascending()); Page<Post> postPage = postService.findAll(pageRequest); int totalPages = postPage.getTotalPages(); List<Integer> pages = createPageRange(0, totalPages - 1); List<String> links = generatePaginationLinks(pages, perPage, soughtBy, currentPage); model.addAttribute("links", links); model.addAttribute("postsOnPage", postPage.getContent()); return "home"; } |
व्याख्या:
- soughtBy Parameter: सॉर्टिंग के लिए उपयोग किए जाने वाले फ़ील्ड को निर्धारित करता है (जैसे,
createdAt
,title
, आदि)। - Sort.by(soughtBy).ascending(): निर्दिष्ट फ़ील्ड के आधार पर आरोही क्रम में सॉर्टिंग लागू करता है।
वैकल्पिक पैरामीटर्स को संभालना
soughtBy
पैरामीटर वैकल्पिक है। यदि प्रदान नहीं किया जाता है, तो यह createdAt
पर डिफ़ॉल्ट होता है, यह सुनिश्चित करते हुए कि डेटा हमेशा एक पूर्वनिर्धारित फ़ील्ड के आधार पर सॉर्ट किया जाता है।
1 |
@RequestParam(value = "soughtBy", required = false, defaultValue = "createdAt") String soughtBy |
व्याख्या:
- required = false: पैरामीटर को वैकल्पिक बनाता है।
- defaultValue = "createdAt": यदि
soughtBy
प्रदान नहीं किया जाता है तो डिफ़ॉल्ट सॉर्टिंग फ़ील्ड सेट करता है।
पेजिनेशन लिंक्स जनरेट करना
पेजिनेशन लिंक्स की डायनेमिक जनरेशन उपयोगकर्ताओं को विभिन्न पृष्ठों के बीच निर्बाध रूप से नेविगेट करने की अनुमति देती है। यह अनुभाग वर्तमान पेजिनेशन स्थिति के आधार पर इन लिंक्स को बनाने को कवर करता है।
डायनेमिक लिंक्स बनाना
पेजिनेशन लिंक्स कुल पृष्ठों की संख्या और वर्तमान पृष्ठ के आधार पर जनरेट किए जाते हैं। प्रत्येक लिंक लागू किए गए सॉर्टिंग और पेजिनेशन पैरामीटर्स के साथ संबंधित पृष्ठ की ओर निर्देशित करता है।
1 2 3 4 5 6 7 8 9 10 11 12 13 |
private List<String> generatePaginationLinks(List<Integer> pages, int perPage, String sortBy, int currentPage) { List<String> links = new ArrayList<>(); for (Integer link : pages) { String active = ""; if (link == currentPage) { active = "active"; } String url = "/posts?perPage=" + perPage + "&page=" + (link + 1) + "&soughtBy=" + sortBy; String htmlLink = "<li class='page-item " + active + "'><a class='page-link' href='" + url + "'>" + (link + 1) + "</a></li>"; links.add(htmlLink); } return links; } |
व्याख्या:
- Loop Through Pages: प्रत्येक पृष्ठ संख्या पर पुनरावृत्त करता है।
- Active Class: दृश्य अंतर के लिए वर्तमान पृष्ठ लिंक में
active
क्लास जोड़ता है। - URL Construction:
perPage
,page
, औरsoughtBy
के लिए क्वेरी पैरामीटर्स के साथ URL बनाता है। - HTML Link: प्रत्येक पेजिनेशन लिंक के लिए HTML स्निपेट बनाता है।
सक्रिय स्थितियों को संभालना
सक्रिय पृष्ठ को हाइलाइट करने से वर्तमान पृष्ठ संदर्भ को इंगित करके उपयोगकर्ता नेविगेशन में सुधार होता है।
1 2 3 |
if (link == currentPage) { active = "active"; } |
व्याख्या:
- Condition: जांचता है कि लूप का वर्तमान लिंक सक्रिय पृष्ठ के अनुरूप है या नहीं।
- Active Class: वर्तमान पृष्ठ लिंक को अलग ढंग से स्टाइल करने के लिए
active
क्लास असाइन करता है।
Bootstrap के साथ दृश्य को संवर्धित करना
फ्रंटएंड में Bootstrap को एकीकृत करने से यह सुनिश्चित होता है कि पेजिनेशन इंटरफेस प्रतिक्रियाशील और दृश्यात्मक रूप से आकर्षक है। यह अनुभाग Bootstrap के पेजिनेशन कंपोनेंट्स को दृश्य में शामिल करने की रूपरेखा प्रस्तुत करता है।
Bootstrap पेजिनेशन को शामिल करना
Bootstrap पूर्वनिर्धारित क्लासेस प्रदान करता है जिन्हें पेजिनेशन लिंक्स को प्रभावी ढंग से स्टाइल करने के लिए उपयोग किया जा सकता है।
1 2 3 4 5 6 7 8 9 10 |
<!-- Pagination Section in home.html --> <nav aria-label="Page navigation example"> <ul class="pagination"> <th:block th:if="${links != null}"> <th:block th:each="link : ${links}"> <th:block th:utext="${link}"></th:block> </th:block> </th:block> </ul> </nav> |
व्याख्या:
- Navigation Element (
<nav>
): पेजिनेशन क्षेत्र की सिमेंटिक संरचना को परिभाषित करता है। - Unordered List (
<ul>
): स्टाइलिंग के लिए Bootstrap कीpagination
क्लास का उपयोग करता है। - Spring Thymeleaf एकीकरण:
- th:if: जांचता है कि पेजिनेशन लिंक्स मौजूद हैं या नहीं।
- th:each:
links
मॉडल एट्रीब्यूट में प्रत्येक लिंक पर इटरेट करता है। - th:utext: प्रत्येक लिंक के लिए अनएस्केप्ड HTML डालता है, HTML संरचना को संरक्षित करते हुए।
सक्रिय लिंक्स को स्टाइल करना
Bootstrap की क्लासेस का उपयोग करके, सक्रिय पेजिनेशन लिंक को दृश्य रूप से अलग किया जाता है ताकि वर्तमान पृष्ठ को इंगित किया जा सके।
1 2 3 |
<li class="page-item active"> <a class="page-link" href="#">1</a> </li> |
व्याख्या:
- page-item active: हाईलाइटिंग के लिए Bootstrap की pagination item क्लास को
active
क्लास के साथ जोड़ता है। - page-link: Bootstrap की pagination link स्टाइल्स के अनुसार लिंक को स्टाइल करता है।
निष्कर्ष
Spring Boot एप्लिकेशन में पेजिनेशन और सॉर्टिंग को लागू करने से डेटा प्रबंधन और उपयोगकर्ता अनुभव में महत्वपूर्ण सुधार होता है। रिक्वेस्ट पैरामीटर्स को कॉन्फ़िगर करके, कंट्रोलर लॉजिक को समायोजित करके, और फ्रंटएंड प्रस्तुतीकरण के लिए Bootstrap को एकीकृत करके, डेवलपर्स बड़े डेटासेट्स को कुशलतापूर्वक संभाल सकते हैं और उपयोगकर्ताओं के लिए सहज नेविगेशन प्रदान कर सकते हैं।
मुख्य निष्कर्ष
- पेजिनेशन सामग्री को प्रबंधनीय पृष्ठों में विभाजित करके डेटा लोडिंग को अनुकूलित करता है और प्रदर्शन में सुधार करता है।
- सॉर्टिंग विशिष्ट मानदंडों के आधार पर डेटा को व्यवस्थित करती है, जिससे सुलभता और विश्लेषण में सहायता मिलती है।
- Spring Boot के
PageRequest
औरSort
क्लासेस पेजिनेशन और सॉर्टिंग के निर्बाध एकीकरण की सुविधा प्रदान करते हैं। - पेजिनेशन लिंक्स की डायनेमिक जनरेशन, Bootstrap की स्टाइलिंग के साथ मिलाने पर, एक प्रतिक्रियाशील और उपयोगकर्ता-मित्र इंटरफ़ेस का परिणाम होता है।
भविष्य के सुधार
- डायनेमिक सॉर्टिंग: उपयोगकर्ताओं को आरोही और अवरोही क्रम के बीच टॉगल करने की अनुमति देना।
- फिल्टर इंटीग्रेशन: अधिक परिष्कृत डेटा पुनर्प्राप्ति के लिए पेजिनेशन और सॉर्टिंग को डेटा फिल्टरिंग के साथ जोड़ना।
- ऑसिंक्रोनस लोडिंग: बिना पूरे पेज के रीलोड के बेहतर नेविगेशन के लिए AJAX को लागू करना।
SEO ऑप्टिमाइज़्ड कीवर्ड्स: Spring Boot pagination, Spring Boot sorting, pagination in Spring Boot, sorting in Spring Boot, Spring Boot PageRequest, Spring Boot Sort, Bootstrap pagination, Java Spring Boot tutorials, implementing pagination Spring Boot, data sorting Spring Boot, enhancing user experience Spring Boot, Spring Boot controller pagination, dynamic pagination links Spring Boot