This is the second question in the row about my Django project. The code I use here has parts copied from this question:Stack Overflow
What I aim to achieve is a dynamic table, that loops through objects in a list(currently the interval between records is 3 seconds). Let's say I have 21 records. The table first displays records of 1 to 10, on the displaykala.html table. Then it replaces only the table content with records of 11 to 20(with AJAX, without page refresh. The new contents come from get_more_tables_kala.html, and those table rows coming from there, are appended to the displaykala.html table). At no point should the table be empty (UNLESS there is simply no objects to display).
Finally, the contents of 11-20 are replaced with contents of 21-30. In this case, only one row is displayed.
Basicly it always displays first ten records(even if there is only one). Then the code increments the startindex and endindex of the rows, and checks if there is records between those. If there is more than 10 records, it will empty the table and instantly load up the next records (as long as there is even 1 record). Else, the program should wait X amount of seconds, until checking again.
The code has been going through various experimentations, I'm sorry for any dumb coding. I'm still learning Django and AJAX.
There is a few problems though, but let's focus on the main one When the displaykala.html is loaded, the table is displayed empty first, for 3 seconds. I know this is because the code loads the empty displaykala.html table. If I were to set in views that displaykala.html table should display rows 1 to 10 by default, I run into a rendering problem if there is more than 10 rows.
Those rows are loaded from the get_more_tables_kala.html, but when the code is supposed to switch back to displaykala.html, I'm either forced to reload the page (which is not an option due to network traffic increase), or return a new render with displaykala.html as a parameter, which causes the page to create a "copy" of itself, in the place where the table rows are supposed to be.
What I want is the program to switch between the records, without diplaying empty page in between.
I am open to any kind of optimizations or different ideas, as long as they're somewhat simple to understand. I know that this code is rubbish. I'm just trying to get it to work.
I must have missed something vital to tell you, please comment below if you need more info.
EDIT: Also, when I look at the django server console, the three tables (1-10, 11-20(only two records) and the empty one) produce these rows:
- [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
My code runs between views.py, js_kala.html, displaykala.html and 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 %}
