jQuery डेटाटेबल्स ट्विटर/फेसबुक स्टाइल पेजिंग

Question

मैं किसी भी भाग्य के साथ ऐसा करने के तरीके पर एक अच्छा संसाधन के लिए चारों ओर खोज कर रहा हूं। मैं पाइपलाइनिंग सक्षम (example) के साथ सर्वरसाइड प्रोसेसिंग के साथ jQuery डेटाटेबल्स प्लगइन का उपयोग कर रहा हूं। मेरे पास यह एएसपीनेट वेबफॉर्म प्रोजेक्ट में काम कर रहा है और भविष्य की परियोजनाओं के लिए एमवीसी में जा रहा है। मैं Here मिली कक्षा के साथ सर्वर साइड प्रोसेसिंग का ख्याल रख रहा हूं। मैं पेजिंग से संबंधित Here लेख में देख रहा हूं।

असल में मैं क्या करने की जरूरत datatables प्लगइन और सर्वर साइड प्रसंस्करण के साथ पृष्ठांकन के इस प्रकार बनाने के है

नोट (पाइपलाइनिंग यहाँ जरूरी महत्वपूर्ण नहीं है): चहचहाना करके/शैली पेजिंग मैं बात कर रहा हूँ या तो करने के लिए:

• तालिका कि उपयोगकर्ता के रूप में असीम लोड हो रहा है अतिरिक्त परिणाम तालिका में मौजूदा सामग्री के साथ जोड़ दिया
• अतिरिक्त परिणामों को वापस लाता है के तल पर एक एकल बटन स्क्रॉलिंग के माध्यम से वर्तमान परिणामों के अंत तक पहुंचता है (नोट: मैंने पाया है कि यह कार्यक्षमता डेटाटेबल प्लगइन में बनाई गई है इसलिए मुझे पिछली विधि पर ध्यान केंद्रित करने की आवश्यकता है)।

आखिरकार मैं उपरोक्त पृष्ठांकन की दोनों शैलियों के बीच चुनाव करना चाहता हूं।

क्या किसी के पास साझा करने के लिए कोई अच्छी सलाह और/या नमूने/ट्यूटोरियल हैं?

Answer 1

मैंने PageLoadMore प्लग-इन विकसित किया है जो "अधिक लोड करें" बटन के साथ डिफ़ॉल्ट पेजिनेशन नियंत्रण को प्रतिस्थापित करने की अनुमति देता है।

1. jQuery और jQuery डेटाटेबल्स फ़ाइलों को लोड करने के बाद प्लग-इन की जावास्क्रिप्ट फ़ाइल शामिल करें।
2. तालिका के बाद आईडी btn-example-load-more के साथ "अधिक लोड करें" बटन जोड़ें।

3. तालिका प्रारंभ करने में नीचे दिए गए कोड का उपयोग करें:

   $(document).ready(function(){ 
       var table = $('#example').DataTable({ 
        dom: 'frt', 
        ajax: 'https://api.myjson.com/bins/qgcu', 
        drawCallback: function(){ 
        // If there is some more data 
        if($('#btn-example-load-more').is(':visible')){ 
         // Scroll to the "Load more" button 
         $('html, body').animate({ 
          scrollTop: $('#btn-example-load-more').offset().top 
         }, 1000); 
        } 
   
        // Show or hide "Load more" button based on whether there is more data available 
        $('#btn-example-load-more').toggle(this.api().page.hasMore()); 
        }  
       }); 
   
       // Handle click on "Load more" button 
       $('#btn-example-load-more').on('click', function(){ 
        // Load more data 
        table.page.loadMore(); 
       }); 
   }); 
   

कोड और प्रदर्शन के लिए this example देखें।

अधिक उदाहरण और विवरण के लिए jQuery DataTables: "Load more" button देखें।