带AJAX的Django动态表

时间:2017-12-05 14:34:24

标签: html ajax django django-templates django-views

这是关于我的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作为参数返回一个新的渲染,这会导致页面创建一个" copy"本身,在表行的位置。

我想要的是是在记录之间切换的程序,而不是在其间插入空白页。

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

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

编辑:另外,当我查看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.py

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 %}

2 个答案:

答案 0 :(得分:0)

你应该从&#34; displaykala&#34;中获取数据库中的数据。查看并将数据放入模板文件中。 startind应为0,endind应为9,因为您只提取10条记录。

对于空表问题,似乎setInterval()函数会导致表空为3秒。在调用setInterval()之后,它将在执行进程之前等待一段时间(在这种情况下为3秒)。这意味着此功能使您的程序无法立即执行。 以下是流程工作流程:

  1. 等待3秒
  2. 运行AJAX
  3. 等待3秒
  4. 运行AJAX
  5. 一次又一次
  6. 这意味着您应该在调用setInterval()之前执行一次AJAX过程。

    - Edit-- 在问了这么多问题之后,我发现了一些可能导致空表问题的事情。

    在这部分中,

    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})
    

    当系统无法在过滤中找到任何数据时,仍然使用startind和endind(与先前过滤语句中使用的参数相同)进行过滤。这使您的系统不打印任何内容。

    但是,从您的代码中,我无法理解为什么您的系统在每次开始打开页面时都没有从数据库中找到任何内容。您必须打开IDE和Web浏览器的DevTools的调试模式才能看到会话和Python变量会发生什么。

答案 1 :(得分:0)

现在解决了,从其他地方获得了全新解决方案的帮助。