Question

我将所有数据呈现到页面一次（在单个网址＆＃39; http://localhost:9111/sale/＆＃39;）。

并在该页面上显示不同的标签。

<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

这是我的解决方案：

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

工作原理：

我为我的CSS框架使用SemanticUI，#tab-nav > a以标签为目标。遵循我的命名策略，在每个选项卡中我还添加了ID属性，例如id="firsttab"。
包含内容的DIV都具有ID属性，例如id="firsttab_content"。请注意如何使用target变量定义目标元素：$("#" + target + "_content .filter_importance .menu div:last-of-type")生成#firsttab_content。
在选项卡的内容中，我有一些按钮，它们使用jQuery的load函数来加载数据。
上述解决方案点击其中一个按钮 - trigger('click')。

备注： 1.如果您使用one('click', function()，则内容将仅加载一次。如果您修改代码并制作on('click', function()（请注意e一个 - >打开），则每次单击选项卡时都会加载内容。

如果您想将某个标签设置为默认标签并加载其中的内容，请将“触发器”（＆＃39;点击＆＃39;）放在
内
$（＆＃34; document＆＃34;）。ready（function（）{ }）;

您可以决定使用此代码预加载哪些内容：

$（＆＃34; document＆＃34;）。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.

}）;

请注意，您可能希望使用其他代码激活选项卡 - 我是通过从后端的URL读取哈希来实现的。通常通过向元素添加类active来完成，在本例中为"#firsttab a"。

Answer 2

无论您使用哪种后端语言或框架，浏览器都只能识别 HTML ， CSS 和 JavaScript 。您似乎正在使用Django Web框架在Python中开发应用程序。

您可以按照以下方法改善页面加载和最终用户体验，

仅展示最低限度＆amp;重要数据 - 仅在服务器端呈现最少的信息，用户的眼睛在加载页面时首先查看它。
其他部分可以为空 - 当页面加载到浏览器中时，有一个占位符（即空标签页）以填充数据。
使用Ajax - 在浏览器中加载页面后，会调用Ajax来加载数据。
正在加载... - 与此同时，您可以显示一些信息，说明“正在载入...”或动画图片，以告知用户数据加载。
使用客户端Javascript MVC框架 - 您可以使用客户端JavaScript MVC框架（例如Angular.js）将大部分渲染任务移至客户端，而不是在服务器端渲染所有内容。 Backbone.js，Ember.js，React.js，Vue.js等。
预聚合大数据集 - 有时，最好先加载预聚合数据。当用户进一步点击时，您可以显示特定于用户兴趣的详细信息。
使用分页 - 如果您要在表格中显示数据，请仅使用分页方法检索并显示有限数量的行，例如如何显示Google搜索结果
Google's - 让网络更快 - 最后，为了加快和优化您的网络应用的效果，请遵循Google's - Make the Web Faster指南。

Answer 3

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

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

3 个答案: