Django动态表与AJAX

Question

这是关于我的Django项目的第二个问题。我在这里使用的代码包含从这个问题复制的部分：Stack Overflow

我想要实现的是一个动态表，它循环遍历列表中的对象（当前记录之间的间隔是3秒）。假设我有21条记录。该表首先在displaykala.html表上显示1到10的记录。然后它只用11到20的记录替换表内容（使用AJAX，没有页面刷新。新内容来自get_more_tables_kala.html，那些来自那里的表行被附加到displaykala.html表）。表格在任何时候都不应为空（除非根本没有要显示的对象）。

最后，将11-20的内容替换为21-30的内容。在这种情况下，只显示一行。

基本上它总是显示前十条记录（即使只有一条记录）。然后代码递增行的startindex和endindex，并检查它们之间是否有记录。如果有超过10条记录，它将清空表并立即加载下一条记录（只要有1条记录）。否则，程序应该等待X秒，直到再次检查。

代码已经进行了各种实验，对于任何愚蠢的编码我很抱歉。我还在学习Django和AJAX。

但是有一些问题，但让我们关注主要问题当加载displaykala.html时，表格首先显示为空，持续3秒。我知道这是因为代码加载了空的displaykala.html表。如果我在视图中设置displaykala.html表默认显示行1到10，如果有超过10行，我会遇到渲染问题。

这些行是从get_more_tables_kala.html加载的，但是当代码应该切换回displaykala.html时，我要么被迫重新加载页面（由于网络流量增加而不是一个选项），或者返回一个新的使用displaykala.html作为参数进行渲染，这会导致页面在表行所在的位置创建自身的“副本”。

我想要的是在记录之间切换的程序，而不在其间显示空白页面。

我愿意接受任何优化或不同的想法，只要它们有点简单易懂。我知道这段代码是垃圾。我只是想让它发挥作用。

我一定错过了一些重要的信息告诉你，如果你需要更多信息，请在下面评论。

编辑：此外，当我看到django服务器控制台时，三个表（1-10,11-20（只有两个记录）和空表）产生这些行：

[14 / Dec / 2017 12:33:22]“GET / user / get_more_tables_k HTTP / 1.1”200 2222
[14 / Dec / 2017 12:33:24]“GET / user / get_more_tables_k HTTP / 1.1”200 439
[14 / Dec / 2017 12:33:27]“GET / user / get_more_tables_k HTTP / 1.1”200 1

我的代码在views.py，js_kala.html，displaykala.html和get_more_tables_kala.html之间运行。

views.朋友

from django.shortcuts import render, redirect
from userside.models import Kala
from django.contrib.auth.decorators import login_required
from django.db import connection

@login_required
def displaykala(request):
    return render(request, 'displaykala.html')


@login_required
def get_more_tables_kala(request):

    startind = request.session.get('startind')
    if not startind:
        startind = 0
    request.session['startind'] = startind

    endind = request.session.get('endind')
    if not endind:
        endind = 10
    request.session['endind'] = endind

    kalat = Kala.objects.filter(rivinro__gt=startind, rivinro__lte=endind)
    count = kalat.count()
    if count == 0:
        request.session['startind'] = 0
        request.session['endind'] = 10
        kalat = Kala.objects.filter(rivinro__gt=startind, rivinro__lte=endind)
        return render(request, 'get_more_tables_kala.html', {'kalat': kalat})
    else:
        request.session['startind'] += 10
        request.session['endind'] += 10
        kalat = Kala.objects.filter(rivinro__gt=startind, rivinro__lte=endind)
        return render(request, 'get_more_tables_kala.html', {'kalat': kalat})

js_kala.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script>
    var append_increment = 0;
    setInterval(function() {
        $.ajax({
            type: "GET",
            url: "{% url 'get_more_tables_kala' %}",  // URL to your view that serves new info
            data: {'append_increment': append_increment}
        })
        .done(function(response) {
            $('#_appendHere_kala').html('');
            $('#_appendHere_kala').append(response);
            append_increment += 10;
        });
     }, 3000)
</script>

displaykala.html

<html>
    <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
  {% load static %}
    {% include 'loginbar.html' %}
    <head>
      <link rel="stylesheet" type="text/css" href="{% get_static_prefix %}css/style.css">
        <title>Display</title>
    </head>
    <body>
            <h1>Display</h1>
            <table>
                <tr>
                    <th>Rivinumero</th>
                    <th>Tuote</th>
                    <th>Latinankielinen nimi</th>
                    <th>Pyyntialue</th>
                    <th>Pyyntipäivä</th>
                    <th>Tuotantotapa</th>
                    <th>Pyydystyyppi</th>
                </tr>
            </table>
            <table id="_appendHere_kala" class="table table-striped table-condensed">
                        <thead>
                      </thead>
                      {% include 'js_kala.html' %}
                        {% for kala in kalat %}
                        <tr>
                        <tbody id="tbody">
                          <td>{{kala.rivinro}}</td>
                          <td>{{kala.tuote}}</td>
                          <td>{{kala.latinalainen_nimi}}</td>
                          <td>{{kala.pyyntialue}}</td>
                          <td>{{kala.pyyntipaiva|date:"d.m.Y" }}</td>
                          <td>{{kala.tuotantotapa}}</td>
                          <td>{{kala.pyydystyyppi}}</td>
                        </tbody>
                        </tr>
                        {% endfor %}
                      </table>
    </body>
</html>

get_more_tables_kala.html

{% load static %}
{% for kala in kalat %}
<tbody id='tbody'>
    <tr>
        <td>{{kala.rivinro}}</td>
        <td>{{kala.tuote}}</td>
        <td>{{kala.latinalainen_nimi}}</td>
        <td>{{kala.pyyntialue}}</td>
        <td>{{kala.pyyntipaiva|date:"d.m.Y" }}</td>
        <td>{{kala.tuotantotapa}}</td>
        <td>{{kala.pyydystyyppi}}</td>
     </tr>
</tbody>

{% endfor %}

Answer 1

另一答案