टेबल छँटाई के लिए JQuery प्लगइन: TableSorter.js। पेज नेविगेशन कैसे प्राप्त करें?

प्रविष्टि

एक परियोजना को विकसित करते समय, मुझे एक तालिका में डेटा को सॉर्ट करने के साथ समस्या को हल करना था। मैं इसके लिए PHP का उपयोग नहीं करना चाहता था, क्योंकि जब पृष्ठ को फिर से लोड किया जाता है तो प्रभाव खो जाता है। इसलिए मैं jQuery प्लगइन " TableSorter.js " की आधिकारिक वेबसाइट पर आया था - www.tablesorter.com । अंग्रेजी-भाषा के दस्तावेज़ में थोड़ी सी अफवाह होने के बाद, मुझे साइट की ख़बरों में रूसी-भाषा की वेबसाइट: www.tablesorter.ru पर एक लिंक पाकर ख़ुशी हुई।

सिद्धांत रूप में, सब कुछ बहुत स्पष्ट रूप से वहां वर्णित किया गया था और मुझे जल्दी से एहसास हुआ कि सब कुछ कैसे काम करता है ...
लेकिन प्रलेखन में एक महत्वपूर्ण चूक थी: पृष्ठांकन के संचालन के सिद्धांत को पर्याप्त रूप से वर्णित नहीं किया गया था, और आवश्यक फ़ाइलों को निर्धारित नहीं किया गया था। और मुझे इस फ़ंक्शन की आवश्यकता थी, क्योंकि मेरी तालिकाओं में कम से कम 150 पंक्तियाँ थीं। मुझे खुद इस समस्या को हल करना था।

आवश्यक सामग्री

• निम्न स्क्रिप्ट को हमारे पेज से डाउनलोड / कनेक्ट करें:
• JQuery ही: code.google.com/intl/en-RU/apis/lbooks/devguide.html#jquery
• TableSorter प्लगइन: tablesorter.ru/jquery.tablesorter.min.js
• पेज नेविगेशन के लिए टेबलसोर्टर प्लगइन्स: टेबलसर्किट ./addons/pager/jquery.tablesorter.pager.js
• Bluish विषय (एक हरा भी है): tablesorter.ru/themes/blue/blue.zip
• पेज नेविगेशन के लिए चित्रों के साथ पुरालेख: bazmaster.ru/downloads/table.zip

पेज नेविगेशन

अब मैं आपको दिखाऊंगा कि इस प्लगइन का उपयोग करके पृष्ठ नेविगेशन कैसे कॉन्फ़िगर किया जाए - वास्तव में, समाधान काफी सरल है, लेकिन इस समाधान को खोजने में मुझे बहुत समय लगा।

मैंने केवल इस उदाहरण के कोड का सावधानीपूर्वक अध्ययन करने और सभी चित्रों को डाउनलोड करने और पेज के कोड से मुझे आवश्यक कोड डाउनलोड करके इस समस्या का पता लगाया।

मैंने चित्रों को एक अलग संग्रह में एकत्र किया जिसका आप उपयोग कर सकते हैं।

हम अपने पेज की HEAD टैग में अपनी सभी स्क्रिप्ट और स्टाइल को जोड़ते हैं। वे मेरे लिए इस तरह दिखते थे:

<link type="text/css" rel="stylesheet" href="bluetable/style.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.metadata.js"></script> <script type="text/javascript" src="/js/jquery.tablesorter.js"></script> <script type="text/javascript" src="/js/jquery.tablesorter.pager.js"></script> 

यहां, HEAD टैग में, हम एक जावास्क्रिप्ट कोड लिखते हैं जो हमारी तालिका के काम को सही ढंग से करेगा:

  <script type="text/javascript"> $(document).ready(function() { $("table") .tablesorter({widthFixed: true, widgets: ['zebra']}) .tablesorterPager({container: $("#pager")}); }); </script> 

इसके बाद, / चित्रों / तालिका फ़ोल्डर में चित्रों के साथ संग्रह को अनपैक करें

हमारी तालिका इस तरह दिखाई देगी:

 <table cellspacing="1" class="tablesorter"> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td>28</td> <td>$9.99</td> <td>20%</td> <td>jul 6, 2006 8:14 am</td> </tr> <tr> <td></td> <td></td> <td>33</td> <td>$19.99</td> <td>25%</td> <td>dec 10, 2002 5:14 am</td> </tr> <tr> <td></td> <td></td> <td>18</td> <td>$15.89</td> <td>44%</td> <td>jan 12, 2003 11:14 am</td> </tr> <tr> <td></td> <td></td> <td>45</td> <td>$153.19</td> <td>44%</td> <td>jan 18, 2001 9:12 am</td> </tr> <tr> <td></td> <td></td> <td>22</td> <td>$13.19</td> <td>11%</td> <td>jan 18, 2007 9:12 am</td> </tr> </tbody> </table> 

और अब हम अपने बहुत ही नेविगेशन तत्वों को कनेक्ट करते हैं जो प्रलेखन में इंगित नहीं किए गए हैं (उनके बिना पृष्ठ पर त्रुटियां होंगी):

 <div id="pager" class="pager" style="top: 652px; position: absolute; "> <form> <img src="/images/table/first.png" class="first"> <img src="/images/table/prev.png" class="prev"> <input type="text" class="pagedisplay"> <img src="/images/table/next.png" class="next"> <img src="/images/table/last.png" class="last"> <select class="pagesize"> <option selected="selected" value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> </select> </form> </div> 

वह सब है! अब हमारी तालिका ठीक से काम कर रही है!