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

Question

我将所有数据一次性渲染到单个URL '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>

但是当渲染数据很大时，页面加载需要更多时间。 现在我想知道，如何仅为活动选项卡加载数据？

- Shubham Batra

---

您可以使用Ajax调用，在选项卡链接上放置一个点击监听器来加载活动选项卡。 - Bas van Stein

@BasvanStein，我是前端新手，你能推荐一些链接或教程给我吗？让我能够准确地找到我想要的内容。 - Shubham Batra

我认为这是一个不错的开始：http://www.codexworld.com/load-more-data-using-jquery-ajax-php-from-database/ - Bas van Stein

@BasvanStein 但是我不能使用PHP。 - Shubham Batra

啊，好的，但这并不太重要，你可以使用任何服务器端语言。只需确保它返回正确的格式即可。 - Bas van Stein

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. 
    });

工作原理：

1. 我使用SemanticUI作为CSS框架，#tab-nav > a目标选项卡。遵循我的命名策略，在每个选项卡中我还添加了ID属性，例如id="firsttab"。

2. 所有包含内容的DIV都具有ID属性，例如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 one --> on），每次点击选项卡时内容都会被加载。

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.
   

   });

请注意，您可能想要激活具有附加代码的选项卡 - 我通过从后端读取URL中的哈希来实现。通常是通过向元素添加类active来完成的，在这种情况下是"#firsttab a"元素。

- Peter

Answer 2

无论您使用哪种后端语言或框架，浏览器只能理解HTML、CSS和JavaScript。看起来您正在使用Python和Django Web框架开发应用程序。

您可以采取以下方法来改善页面加载和最终用户体验：

• 只显示最小和重要数据 - 在页面加载时，仅从服务器端呈现用户首先查看的最少信息。
• 其他部分可以为空 - 有一个占位符（即空选项卡页），以便在页面加载到浏览器时填充数据。
• 使用Ajax - 页面加载后，给出一个Ajax调用来加载数据。
• 正在加载... - 同时，您可以显示一些信息，如“正在加载...”或动画图像，以通知用户数据正在加载。
• 使用客户端JavaScript MVC框架 - 您可以使用客户端JavaScript MVC框架（如Angular.js，Backbone.js，Ember.js，React.js，Vue.js等）将大部分呈现任务移动到客户端，而不是在服务器端呈现所有内容。
• 预聚合大型数据集 - 有时，最好第一次加载预聚合数据。当用户进一步点击时，您可以显示特定于用户兴趣的详细信息。
• 使用分页 - 如果要在表格中显示数据，请使用分页方法仅检索和显示有限数量的行，例如Google搜索结果的显示方式
• Google的-让Web更快 - 最后，为了加速和优化您的Web应用程序的性能，请遵循Google's - Make the Web Faster指南。

- Sakthivel

Answer 3

如果您正在使用Spring框架，则可以使用分页概念。它将确保仅获取所需数据并且速度更快。

- Akhil Menon