टैब लोड होने पर ही लोड डेटा?

Question

मैं सभी डेटा को एक बार पृष्ठ में प्रस्तुत कर रहा हूं (एकल यूआरएल 'http://localhost:9111/sale/' पर)।

और उस पृष्ठ पर विभिन्न टैब में दिखा रहा है।

<div class="tab-base"> 
      <!--Nav Tabs--> 
      <ul class="nav nav-tabs"> 
       <li class="active"> 
        <a data-toggle="tab" href="#demo-lft-tab-1">Daily Sale</a> 
       </li> 
       <li> 
        <a data-toggle="tab" href="#demo-lft-tab-2">Channel Wise Sale</a> 
       </li> 
       <li> 
        <a data-toggle="tab" href="#demo-lft-tab-3">Returns</a> 
       </li> 
       </ul> 
      </div> 
    <div class="tab-content"> 
<form method="POST" action="{% url 'sale' %}"> 
    {% csrf_token %} 

    <div id="demo-lft-tab-1" class="tab-pane fade active in"> 
     <div class="panel-body"> 
     <table data-toggle="table"> 
      <thead > 
       <tr> 
        <th data-align="center" data-sortable="true">Day</th> 
        <th data-align="center" data-sortable="true">Sale Value</th> 
        <th data-align="center" data-sortable="true">Quantity Sold</th> 
       </tr> 
      </thead> 
      <tbody> 
       {% for day, val, qty in sale_data %} 
       <tr> 
        <td>{{day}}</td> 
        <td>{{val}}</td> 
        <td>{{qty}}</td> 
       </tr> 
       {% endfor %} 
      </tbody> 
     </table> 
     </div> 
    </div> 



<div id="demo-lft-tab-2" class="tab-pane fade"> 
    <div class="panel-body"> 
     <table data-toggle="table" > 
     <thead> 
      <tr> 
       <th data-align="center" data-sortable="true">Channel</th> 
       <th data-align="center" data-sortable="true">Brand</th> 
       <th data-align="center" data-sortable="true">Category</th> 
       <th data-align="center" data-sortable="true">Selling Price</th> 
       <th data-align="center" data-sortable="true">Quantity Sold</th> 
       <th data-align="center" data-sortable="true">Percentage %</th> 
      </tr> 
     </thead> 
     <tbody> 
      {% for channel,brand,category,selling_price,quantity_sold, percentage in sal_data %} 
      <tr> 
       <td>{{channel}}</td> 
       <td>{{brand}}</td> 
       <td>{{category}}</td> 
       <td>{{selling_price}}</td> 
       <td>{{quantity_sold}}</td> 
       <td>{{percentage}}%</td> 
      </tr> 
      {% endfor %} 
     </tbody> 
     </table> 
    </div> 
</div> 

<!-- here is more code for other tab same as above --> 
<!-- --> 


</form> 


</div> 

लेकिन जब डेटा प्रस्तुत करना बड़ा होता है तो पेज लोड में अधिक समय लगता है।

अब मुझे पता है, केवल सक्रिय टैब के लिए डेटा कैसे लोड करें?

Answer 1

आप स्प्रिंग फ्रेमवर्क का उपयोग कर रहे हैं, तो का उपयोग पृष्ठांकन concept.It सुनिश्चित करें कि केवल आवश्यक डेटा प्राप्त किया जा करने की जरूरत है और तेजी से हो जाएगा कर देगा

Answer 2

यहाँ मेरी समाधान है:

$('#tab-nav > a').one('click', function() { 
     // event.preventDefault(); 
     var target = $(this).attr('id'); 
     $("#" + target + "_content .filter_importance .menu div:last-of-type").trigger('click'); // here you can simplify by the use the `load` function instead of triggering a `click` event. 
    }); 

कैसे यह काम करता है:

1. मैं अपने सीएसएस ढांचे और #tab-nav > a लक्ष्य टैब के लिए SemanticUI का उपयोग करें। मेरी नामकरण नीति के बाद, प्रत्येक टैब में मैंने आईडी विशेषता भी जोड़ा है, उदाहरण के लिए id="firsttab"।

2. सामग्री वाले डीआईवी में आईडी विशेषता है, उदाहरण के लिए id="firsttab_content"। कृपया ध्यान दें कि लक्ष्य तत्व को target चर के उपयोग से परिभाषित किया गया है: $("#" + target + "_content .filter_importance .menu div:last-of-type")#firsttab_content उत्पन्न करता है।

3. टैब की सामग्री के अंदर मेरे पास बटन हैं जो डेटा लोड करने के लिए jQuery के load फ़ंक्शन का उपयोग करते हैं।

4. उपरोक्त समाधान बटनों में से एक पर क्लिक करता है - trigger('click')।

नोट्स: 1. यदि आप one('click', function() का उपयोग सामग्री केवल एक बार लोड किया जाएगा। यदि आप कोड संशोधित करते हैं और on('click', function() (e पर एक - पर ध्यान दें) पर, प्रत्येक बार जब आप टैब पर क्लिक करते हैं तो सामग्री लोड की जाएगी।

1. आप ('क्लिक') के अंदर

   $ (डिफ़ॉल्ट के रूप में एक निश्चित टैब सेट और इसके अंदर सामग्री लोड, `ट्रिगर रखना चाहते हैं, तो" दस्तावेज़ ") .ready (फ़ंक्शन() { }); ।

2. आप तय कर सकते सामग्री इस कोड के साथ पहले से लोड किया जाना चाहिए, जिस पर:

   $ ("दस्तावेज़") तैयार (function() {

   // loads content for tab open on page load 
   var hash = window.location.hash.substr(1); // gets the value of hash from URL 
   $("#" + hash + "_content .filter_importance .menu div:last-of-type").trigger('click'); // targets and clicks the button which loads data inside the tab content area. 
   

   });

की सलाह दी हो आप अतिरिक्त कोड के साथ टैब सक्रिय करने के लिए चाहते हो सकता है कि - मैं अपने बैकएंड में URL से हैश को पढ़ कर ऐसा करते हैं। आमतौर पर यह तत्व "#firsttab a" में तत्व active तत्व जोड़कर किया जाता है।

Answer 3

किसी भी बैकएंड भाषाओं या चौखटे आप उपयोगकर्ता के बावजूद, ब्राउज़र केवल एचटीएमएल, सीएसएस और जावास्क्रिप्ट को समझता है। ऐसा लगता है कि आप पाइथन में Django वेब ढांचे के साथ अनुप्रयोग विकसित कर रहे हैं।

आप नीचे दिए गए पालन कर सकते हैं अपने पृष्ठ लोड और अंतिम उपयोगकर्ता के अनुभवों को बेहतर बनाने के दृष्टिकोण,

• दिखाएँ केवल न्यूनतम & महत्वपूर्ण डाटा - केवल सर्वर साइड से कम से कम जानकारी है, जहां कभी उपयोगकर्ताओं का ध्यान पहले यह जब इस पर गौर प्रस्तुत करना पेज लोड हो गया है।
• अन्य पार्ट्स खाली हो सकते हैं - ब्राउज़र में लोड होने पर पृष्ठ को भरने के लिए एक स्थान धारक (यानी खाली टैब पृष्ठ) रखें।
• अजाक्स का उपयोग करें - एक बार ब्राउज़र में लोड होने वाला पृष्ठ डेटा लोड करने के लिए अजाक्स कॉल देता है।
• लोड हो रहा है ... - इस समय आप डेटा लोडिंग के बारे में उपयोगकर्ता को सूचित करने के लिए "लोड हो रहा है ..." या एनिमेटेड छवियों को कुछ जानकारी दिखा सकते हैं।
• उपयोग क्लाइंट साइड जावास्क्रिप्ट MVC फ़्रेमवर्क - सर्वर साइड में सब कुछ प्रतिपादन के बजाय, आप क्लाइंट साइड जावास्क्रिप्ट MVC चौखटे जैसे Angular.js, Backbone.js, Ember.js, React.js, Vue.js, आदि का उपयोग ग्राहक के पक्ष को प्रतिपादन काम के सबसे स्थानांतरित कर सकते हैं
• प्री-कुल बड़े डेटासेट - कभी-कभी, पहली बार पूर्व-समेकित डेटा लोड करना अच्छा होता है। जब उपयोगकर्ता आगे क्लिक करता है, तो आप उपयोगकर्ता की रुचि के लिए विशिष्ट विस्तृत जानकारी प्रदर्शित कर सकते हैं।
• उपयोग पृष्ठांकन - यदि आप किसी तालिका में डेटा बताते हैं केवल निकालते हैं और तरह पृष्ठांकन दृष्टिकोण का उपयोग कर, कैसे Google खोज परिणाम
• गूगल के प्रदर्शित किया जाता है पंक्तियों की एक सीमित संख्या को दिखाने के लिए जा रहे हैं - वेब बनाओ तेज़ - अंत में, अपने वेब ऐप के प्रदर्शन को तेज और अनुकूलित करने के लिए Google's - Make the Web Faster मार्गदर्शिका लाइनों का पालन करें।