web-dev-qa-db-ja.com

Djangoのテーブルデータをページを更新せずに再読み込みします

私のビューでデータを取得するコードは次のようになります。

order = Order.objects.filter(owner=request.user).order_by('-id')[:10]

テンプレート内のコードは次のようになり、うまく機能します。ここで重要なのは、ページ全体を更新せずに、このテーブルで10秒ごとに情報を更新することです。ビューのURLは/で、テンプレートの名前はhomeです。

           <table class="table table-striped table-condensed">
              <tr>
                <th>Reg.nr.</th>
                <th>M&auml;rke</th>
                <th>Modell</th>
              </tr>
              {% for i in order %}

                {% if i.order_booked %}
                <tr class="success">
                {% else %}
                <tr>                    
                {% endif %}

                 <td>{{ i.regnr|upper }}</td>
                 <td>{{ i.brand|capfirst }}</td>
                 <td>{{ i.brand_model|capfirst }}</td>
              </tr>
              {% endfor %}
            </table>

urls.pyは次のようになります

urlpatterns = [ url(r'^$',views.home, name='home'), url(r'^login/', auth_views.login, {'template_name':'login.html'}, name='account_login'), url(r'^logout/', auth_views.logout, {'template_name':'logout.html'},name='account_logout'), url(r'^add_order/', views.add_order, name='add_order'), url(r'^admin/', admin.site.urls), ]

あなたの誰かがこれについていくつかの光を当てることができますか？

jqueryajaxdjango
10
Likk0s

setInterval、jQuery AJAX、およびviewを使用できます。

あなたのHTML

   <table id="_appendHere" class="table table-striped table-condensed">
      <tr>
        <th>Reg.nr.</th>
        <th>M&auml;rke</th>
        <th>Modell</th>
      </tr>
      {% for i in order %}
        {% if i.order_booked %}
        <tr class="success">
        {% else %}
        <tr>                    
        {% endif %}

         <td>{{ i.regnr|upper }}</td>
         <td>{{ i.brand|capfirst }}</td>
         <td>{{ i.brand_model|capfirst }}</td>
      </tr>
      {% endfor %}
    </table>

[〜＃〜] js [〜＃〜]

<script>
    var append_increment = 0;
    setInterval(function() {
        $.ajax({
            type: "GET",
            url: {% url 'get_more_tables' %},  // URL to your view that serves new info
            data: {'append_increment': append_increment}
        })
        .done(function(response) {
            $('#_appendHere').append(response);
            append_increment += 10;
        });
    }, 10000)
</script>

ビュー

def get_more_tables(request):
    increment = int(request.GET['append_increment'])
    increment_to = increment + 10
    order = Order.objects.filter(owner=request.user).order_by('-id')[increment:increment_to]
    return render(request, 'get_more_tables.html', {'order': order})

get_more_tables.html

  {% for i in order %}
  <tr>
    {% if i.order_booked %}
    <tr class="success">
    {% else %}
    <tr>                    
    {% endif %}

     <td>{{ i.regnr|upper }}</td>
     <td>{{ i.brand|capfirst }}</td>
     <td>{{ i.brand_model|capfirst }}</td>
  </tr>
  {% endfor %}

そして、新しいビューをurls.pyに追加してください（name='get_more_tables'、またはJSにある名前が何であれurl:）

これは、JS関数のsetIntervalを使用して、サーバーのビューに対してGET AJAXリクエストを10000ミリ秒（10秒）ごとに）実行します。次に、この新しいコンテキストを使用して別のHTMLファイルをレンダリングし、responseとして元のHTMLページに送り返します。新しいresponseは、jQueryを介してappendedになり、テーブル。このサイクルが発生するたびにスライスが増加するため、Orderから同じ結果が得られません。

これはノンストップでループすることに注意してください。ループを終了させる場合は、JSにコードを追加して、最後の応答が空に戻った場合にsetIntervalを停止する必要があります。

16
Hybrid