Django + Ajax - ページの読み込み時に大きなデータの小さな部分をレンダリングする

Question

大きなテーブルをレンダリングするDjangoアプリケーションがあります。私のグローバルな目的は、ページロード時にテーブルの小さな部分、例えば10-20レコードだけをレンダリングして、ユーザーが何年も待たずに、バックグラウンドajax呼び出しでテーブルの残りを非同期にアップロードして行を不可視にすることです。次に、ユーザーがスクロールダウンすると、行が連続して表示されます。

私は予備的なアーキテクチャを起草しましたが、これは私がこれを行う最もクリーンな方法ではありません。

私が説明することができ、次の方法の場合と同様に行うことを計画します。1.これを行うことにより、最初の10行をレンダリング

ステップ：

view get_first_10_rows(request): 
    qs = some_orm_query[:10] 
    return render_to_response('order_scheduler/orders.html', 
           'qs':qs}, 
           context_instance=RequestContext(request)) 

ステップ2.取得ページが完全にレンダリングされた後、jquery関数のクエリーセットのjson-analogueが 'display：none'モードで表に追加された後：

ビュー：

view get_entire_rows(request): 
     qs = some_orm_query.all() 
     return render_to_response('order_scheduler/orders.html', 
            'qs':qs}, 
            context_instance=RequestContext(request)) 

jqueryの/ AJAX

$(function() { 
    $.get(..., function(json_result){ 
     // loop through json 
     // append rows to the table and apply 'display:none' 
     // 
    }); 
}); 

ステップ3.

ページダウンユーザーがスクロールなどの非表示の行を示しjqueryの関数を書きます。

---

これには2つの懸念があります。まず、問題のテーブルがDjangoの書式設定を使用してレンダリングされている場合、jsonを使用してjqueryでテーブルをレンダリングする方法はわかりません。そして、第二に、私はすでにDjangoのテンプレートで書いたコードをサイクル用にクローン化するたくさんのjsスクリプトを書く必要があります。つまり、テンプレートで何かを変更するたびに、私は自分のjsコードを修正する必要があります。 これを行うにはよりクリーンで簡単な方法があると確信しています。

また、私はDjangoテンプレートをあきらめて、純粋にjsでテーブルコードを書くことができます。このアプローチの欠点は、テーブルセルを編集可能にするために非常に価値のあるDjangoフォームセットの犠牲と、ユーザー更新をDBに保存する機能です。 誰も私にこのことをするヒントを与えることができますか？高いレベルの推薦やキーワードも評価されるべきです。私はどこから始めるべきか、何をGoogleにするのかはわかりません。

Answer 1

あなたが非同期的にデータをロードする場合ビトー・フレイタスで説明したように、あなたは無限のscrolling with Django and some Javascriptを使用することができます。

models.pyで：

from django.db import models 

class Article(models.Model): 
    title = models.CharField(max_length=30) 
    body = models.TextField(max_length=2000) 
    date = models.DateTimeField() 
    author = models.CharField(max_length=30) in `views.py` : 

from django.views.generic.list import ListView 
from .models import Article 

class ArticlesView(ListView): 
    model = Article 
    paginate_by = 10 # where you define the 10 records you want the user to initially see 
    context_object_name = 'articles' 
    template_name = 'blog/articles.html' 

とurls.py：

from .views import ArticlesView 
. 
. 
. 
url(r'^articles$', ArticlesView.as_view(), name='articles'), 

そして、そのテンプレート

<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script> 
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script> 
<script src="{% static 'js/infinite.min.js' %}"></script> 

<div class="infinite-container"> 
    {% for article in articles %} 
     <div class="infinite-item"> 
     <h3>{{ article.title }}</h3> 
     <p> 
      <small>{{ article.author }}/{{ article.date }}</small> 
     </p> 
     <p>{{ article.body|truncatechars:100 }}</p> 
     </div> 
    {% endfor %} 
    </div> 

    <div class="loading" style="display: none;"> 
    Loading... 
    </div> 

    {% if page_obj.has_next %} 
    <a class="infinite-more-link" href="?page={{ articles.next_page_number }}">More</a> 
    {% endif %} 

    <script> 
    var infinite = new Waypoint.Infinite({ 
     element: $('.infinite-container')[0], 
     onBeforePageLoad: function() { 
     $('.loading').show(); 
     }, 
     onAfterPageLoad: function ($items) { 
     $('.loading').hide(); 
     } 
    }); 
    </script> 

： articles.htmlを食べました