Carica dati solo quando la scheda è attiva?

Question

Sto visualizzando tutti i dati nella pagina una volta (sul singolo url 'http://localhost:9111/sale/').

E visualizzato in diverse schede su quella pagina.

<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> 

Ma quando i dati di rendering sono grandi, il caricamento della pagina richiede più tempo.

Ora voglio sapere, Come caricare i dati solo per la scheda attiva?

Answer 1

Se si utilizza Spring Framework, quindi utilizzare Impaginazione concept.It farà in modo che solo i dati richiesti deve essere recuperata e sarà veloce

Answer 2

Ecco la mia soluzione:

$('#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. 
    }); 

Come funziona:

1. posso utilizzare SemanticUI per il mio quadro CSS e #tab-nav > a obiettivi le schede. Seguendo la mia politica di denominazione, in ogni scheda ho anche aggiunto l'attributo ID, ad esempio id="firsttab".

2. I DIV con contenuto hanno tutti attributo ID, ad esempio id="firsttab_content". Si noti come l'elemento target viene definito con l'uso della variabile target: $("#" + target + "_content .filter_importance .menu div:last-of-type") produce #firsttab_content.

3. All'interno del contenuto della scheda sono presenti pulsanti che utilizzano la funzione load di jQuery per caricare i dati.

4. La soluzione sopra indicata fa clic su uno dei pulsanti - trigger('click').

Note: 1. se si utilizza one('click', function() il contenuto verrà caricato solo una volta. Se si modifica il codice e si effettua on('click', function() (prestare attenzione a e uno -> attivo), il contenuto verrà caricato ogni volta che si fa clic sulla scheda.

2. se si desidera impostare un certo scheda come predefinita e caricare il contenuto al suo interno, mettere il `grilletto ('click') all'interno delle

   $ (" documento ") .ready (function() { }); .

3. Si può decidere su quale contenuto deve essere precaricato con questo codice:

   $ ("documento") pronto (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. 
   

   });

Si consiglia di attivare la scheda con codice aggiuntivo: lo faccio leggendo l'hash dall'URL nel mio backend. Di solito è fatto aggiungendo la classe active all'elemento, in questo caso "#firsttab a".

Answer 3

Indipendentemente da tutte le lingue backend o dei quadri si utente, il browser capisce solo HTML, CSS e JavaScript. Sembra che tu stia sviluppando un'applicazione in Python con il framework web Django.

È possibile seguire sotto approcci per migliorare il carico della pagina e le esperienze degli utenti,

• Mostra solo minima & Importante dati - rendere solo le informazioni minime da un lato server in cui gli occhi mai dell'utente prima guardare dentro quando la pagina è caricata.
• Altre parti possono essere vuote - Avere un segnaposto (cioè schede vuote) per riempire i dati in seguito quando la pagina è stata caricata nel browser.
• Utilizzare Ajax - Una volta caricata la pagina nel browser, effettuare una chiamata Ajax per caricare i dati.
• Caricamento in corso ... - Nel frattempo è possibile visualizzare alcune informazioni che dicono "Caricamento in corso ..." o immagini animate per informare l'utente sul caricamento dei dati.
• utilizzare il client JavaScript lato MVC Framework - Invece di rendere tutto in lato server, è possibile spostare la maggior parte del compito di rendering per lato client utilizzando lato client JavaScript MVC framework quali Angular.js, Backbone.js, Ember.js, React.js, Vue.js, ecc
• Set di dati grande pre-aggregato - A volte, è consigliabile caricare i dati pre-aggregati per la prima volta. Quando l'utente fa clic più avanti, è possibile visualizzare informazioni dettagliate specifiche per l'interesse dell'utente.
• Usa Impaginazione - Se avete intenzione di mostrare i dati in una tabella, solo recuperare e mostrare un numero limitato di righe utilizzando l'approccio di impaginazione come, la modalità di visualizzazione di Google risultati di ricerca
• Google - Rendere il Web Più veloce - Infine, per accelerare e ottimizzare le prestazioni della tua app Web, segui le linee guida Google's - Make the Web Faster.