Django dynamic table with AJAX - html

Question

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

Answer 1

You should fetch data from database in "displaykala" view and throw the data into the template file. The startind should be 0 and endind should be 9 because you are fetching 10 records only.
For the empty table problem, it seems that the setInterval() function would cause the table to be empty for 3 seconds. After calling the setInterval(), it will wait for a period of time (3 seconds in this case) before executing the process. Which means this function makes your program cannot be executed immediately.
Here is the process workflow:
Wait for 3 seconds
Run AJAX
Wait for 3 seconds
Run AJAX
Again and again
Which means you should execute the AJAX process once before calling the setInterval().
--Edit--
After asking so many questions, I've found something that might also cause the empty table problem.
In this part,
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})
You still use startind and endind (which are the same arguments used in previous filtering statement) to do filter when the system cannot find any data in the filtering. This makes your system prints nothing.
However, from your code, I cannot see why your system finds nothing from the database in every time you started opening the page. You will have to open debug mode of IDE and DevTools of web browser to see what happens with the session and Python variables.

Answer 2

Solved for now, got help from elsewhere with a brand new solution.