仅在选项卡处于活动状态时加载数据

Question

I am rendering the all data into page once(on single url ' http://localhost:9111/sale/ ').

And showing into different tabs on that page.

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

But when render data is large then page load takes more time.

Now I want know, How to load the data only for active tab ?

Answer 1

Here is my solution:

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

How it works:

1. I use SemanticUI for my CSS framework and #tab-nav > a targets the tabs. Following my naming policy, in each tab I have also added ID attribute, for instance id="firsttab" .

2. The DIVs with content all have ID attribute, for instance id="firsttab_content" . Please note how the target element is defined with the use of target variable: $("#" + target + "_content .filter_importance .menu div:last-of-type") produces #firsttab_content .

3. Inside the content of the tab I have buttons which use jQuery's load function to load the data.

4. The above solution clicks on one of the buttons - trigger('click') .

Notes: 1. if you use one('click', function() the content will be loaded only once. If you modify the code and make on('click', function() (pay attention to e one --> on), the content would be loaded each time you click on the tab.

2. if you want to set a certain tab as default and load the content inside it, put the `trigger('click') inside the

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

3. You can decide on which content should be preloaded with this code:

   $("document").ready(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. 

   });

Be advised that you might want to activate the tab with additional code - I do it by reading hash from URL in my backend. Usually it is done by adding class active to the element, in this case "#firsttab a" .

Answer 2

Irrespective of any backend languages or the frameworks you user, browser understands only HTML , CSS and JavaScript . It seems that you are developing application in Python with Django web framework.

You can follow below approaches to improve your page load and end user experiences,

• Show Only Minimum & Important Data - Only render minimal information from server side where ever user's eyes first look into it when the page is loaded.
• Other Parts Can Be Empty - Have a place holder(ie empty tab pages) to fill the data later when page loaded into the browser.
• Use Ajax - Once page loaded in browser give an Ajax call to load the data.
• Loading ... - Meantime you can show some information saying "Loading ..." or animated images to inform the user about data loading.
• Use Client Side Javascript MVC Frameworks - Instead of rendering everything in server side, you can move most of the rendering task to client side using client side JavaScript MVC frameworks such as Angular.js , Backbone.js , Ember.js , React.js , Vue.js , etc.
• Pre-aggregate Large Dataset - Sometimes, it is good to load pre-aggregated data for the first time. When user clicks further, you can display detailed information specific to user's interest.
• Use Pagination - If you are going to show data in a table, only retrieve and show a limited number of rows using pagination approach like, how Google search result is displayed
• Google's - Make the Web Faster - Finally, to speed up and optimize your web app's performance follow Google's - Make the Web Faster guide lines.

Answer 3

如果您使用的是Spring Framework，那么请使用Pagination概念。它将确保只需要获取所需的数据并且速度很快