在Django中重新加载表数据，而不刷新页面 [英] Reload table data in Django without refreshing the page

问题描述

在我的视图中获取数据的代码如下所示：

The code to get the data in my view looks like this:

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

我的模板中的代码看起来像这样，效果很好。现在，我希望这个表可以每10秒更新一次，而不用刷新整个页面。视图的url是/，模板的名称是home。

The code in my template looks like this and works great. Now, the thing is that i want this table to update its information every 10 seconds without refreshing the whole page. The url to the view is / and the name of the template is 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看起来像这样

urls.py looks like this

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), ]

任何人都可以点点滴滴，我将非常感谢！

Can anyone of you shed some light over this i would greatly appreciate it!

推荐答案

您可以使用 setInterval ， jQuery AJAX 和视图：

您的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['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：）

And then just make sure to add the new view into your urls.py (make sure it has name='get_more_tables', or whatever the name is in your JS url:)

这样做是使用 setInterval ，一个JS函数，使您的服务器中的视图每10000ms（10秒）生成一个 GET AJAX请求。然后，该视图使用此新上下文呈现单独的HTML文件，并将其作为响应发送回原始HTML页面。新的响应然后通过jQuery追加到您的表。每次这个周期发生时，切片递增，所以您从订单中得不到相同的结果。

What this does is use setInterval, a JS function, to make a GET AJAX request every 10000ms (10 seconds) to a view in your server. The view then renders a separate HTML file using this new context, and sends it as a response back to your original HTML page. The new response is then appended via jQuery to your table. Every time this cycle happens, the slice is incremented, so you don't get the same results from Order.

请记住，这将循环不间断，因此如果您希望结束，则如果最后一个响应返回，则必须向JS添加代码以停止 setInterval 空。

Keep in mind that this will loop non-stop, so if you want it to end you will have to add code to the JS to stop setInterval if the last response came back empty.

这篇关于在Django中重新加载表数据，而不刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！