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

Posted 2023-02-24

【中文标题】仅在选项卡处于活动状态时加载数据？

【英文标题】：Load Data only when tab is active?

【发布时间】：2016-05-30 06:07:28

【问题描述】：

我将所有数据渲染到页面一次（在单个 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>

但是当渲染数据很大时，页面加载需要更多时间。

现在我想知道，如何仅为活动标签加载数据？

【问题讨论】：

您可以使用 ajax 调用通过在标签链接上放置点击监听器来加载活动标签。

@BasvanStein 我是前端新手，你能建议我任何链接或教程，让我得到我想要的东西吗？

我认为这是一个很好的开始：codexworld.com/…

@BasvanStein 但我不能使用 php

啊，好吧，但这并不重要，您可以使用任何您想要的服务器端语言。只要确保它返回正确的格式。

【参考方案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. 
    );

工作原理：

我将 SemanticUI 用于我的 CSS 框架，#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一个-->开启），每次点击tab都会加载内容。

如果您想将某个选项卡设置为默认选项并加载其中的内容，请将 `trigger('click') 放在里面

$("文档").ready(function() );

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

$("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"。

【参考方案2】：

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

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

仅显示最少和重要的数据

- 仅从服务器端呈现最少的信息，当页面加载时，用户的眼睛首先会看到它。

其他部分可以为空

- 当页面加载到浏览器中时，有一个占位符（即空标签页）来填充数据。

使用 Ajax

- 在浏览器中加载页面后，调用 Ajax 来加载数据。

Loading ...

- 同时您可以显示一些信息说“Loading ...”或动画图像来通知用户数据加载。

使用客户端 Javascript MVC 框架

- 您可以使用客户端 javascript MVC 框架（例如 Angular.js、Backbone.js、@）将大部分渲染任务移至客户端，而不是在服务器端渲染所有内容987654323@、React.js、Vue.js等

预聚合大型数据集

- 有时，首次加载预聚合数据会很好。当用户进一步点击时，您可以显示特定于用户兴趣的详细信息。

使用分页

- 如果您要在表格中显示数据，请仅使用分页方法检索和显示有限数量的行，例如 Google 搜索结果的显示方式

Google 的 - 让网络更快

- 最后，要加快和优化网络应用的性能，请遵循 Google's - Make the Web Faster 指南。

【参考方案3】：

如果你使用的是Spring框架，那么使用分页概念。它将确保只需要获取所需的数据并且速度很快