タブがアクティブな場合のみデータを読み込みますか？

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> 

レンダリングデータが大きい場合、ページの読み込みに時間がかかります。

は今、私は唯一のアクティブなタブのデータをロードする方法を、知っているしたいですか？

Answer 1

あなたは春のフレームワークを使用している場合、ページネーションconcept.Itが必要なデータのみを取得する必要があることを確認します。ここで

Answer 2

速くなります使用することは私のソリューションです：

どう

$('#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フレームワークと#tab-nav > aターゲットタブのSemanticUIを使用

1. 。私の命名方針に従って、各タブにID属性も追加しました。例えば、id="firsttab"です。コンテンツすべてと

2. div要素は、例えばid="firsttab_content"のために、ID属性を持っています。 $("#" + target + "_content .filter_importance .menu div:last-of-type")は#firsttab_contentを生成：ターゲット要素がtarget変数を使用して定義されているかに注意してください。

3. タブの内容の中には、jQueryのload関数を使用してデータをロードするボタンがあります。 trigger('click') -

4. 上記溶液は、いずれかのボタンをクリックします。

注：あなたがone('click', function()を使用する場合 1.内容は一度だけロードされます。 あなたは（e 1に注意を払う - >上の）コードを変更してon('click', function()を作る場合は、内容は、タブをクリックするたびにロードされます。

デフォルトとして、特定のタブを設定し、その中にコンテンツをロードし、

$（ "ドキュメント内に`トリガー（「クリック」）を入れたい場合は

<オール=「2」を開始> "）.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 3

にかかわらず、あなたのユーザーの任意のバックエンドの言語やフレームワークの、ブラウザだけでHTML、CSSとJavaScriptのを理解しています。 DjangoのWebフレームワークでPythonでアプリケーションを開発しているようです。

あなたは以下に従うことができますが、あなたのページのロードとエンドユーザー体験を向上させるために近づき、

• のみ最小&重要なデータを表示 - これまで、ユーザーの目が最初の時に見てどこにのみ、サーバー側からの最小限の情報をレンダリングページが読み込まれます。
• 他の部分を空にすることができます - ページをブラウザに読み込んだときに後でデータを埋めるプレースホルダー（空のタブページ）があります。
• Ajaxを使用する - ブラウザにページをロードすると、データをロードするためのAjax呼び出しが行われます。
• 読み込み中... - 「読み込んでいます...」という動画や動画を表示して、ユーザーにデータの読み込みを知らせることができます。
• 使用するクライアント側のJavaScript MVCフレームワーク - 代わりに、サーバー側のすべてをレンダリングするのには、クライアント側のJavaScriptのMVCフレームワークのようなAngular.js、Backbone.js、Ember.js、React.js、Vue.jsなどを使用してクライアント側にレンダリングタスクのほとんどを移動することができます
• 事前集計ラージデータセット - 事前集計データを初めて読み込むのがよい場合もあります。ユーザーがさらにクリックすると、ユーザーの関心事に固有の詳細情報を表示できます。
• 使用改ページ - あなただけのようなページネーションのアプローチを使用して行の限られた数を取得し、表示し、テーブル内のデータを表示しようとしている場合は、Googleの検索結果の表示方法を
• Googleの - ウェブを作りますより速く - 最後に、ウェブアプリのパフォーマンスを高速化して最適化するには、Google's - Make the Web Fasterガイドラインに従ってください。