Django - Dynamic filters in a webpage - django

Question

I am still a learner for python django. I’d like to filter dynamically data on the table below
table
The informations in my html template are :
<table>
<thead>
<tr>
<th>N°Commande</th>
<th>Magasin</th>
<th>Objet</th>
<th>Date commande</th>
<th>Montant</th>
<th>Etat</th>
</tr>
</thead>
<tbody>
{% for item in query_results %}
<tr>
<td>{{ item.numero_commande }}</td>
<td>{{ item.enseigne}}</td>
<td>{{ item.Objet}}</td>
<td>{{ item.Date_commande}}</td>
<td>{{ item.Montant}}</td>
<td>{{ item.Etat}}</td>
</tr>
</tbody>
from the class : class Commande(models.Model)
Here is an exemple of what I’d like to have (filters on table fields) :
table with dynamic filters
thank you in advance for your help
Vinloup

Answer 1

There's a couple of routes you could take to accomplish this, but as a beginner I think you should take a look at the django-filter library. Setup is quite simple:
pip install django-filter
Then add 'django_filters' to your INSTALLED_APPS.
INSTALLED_APPS = [
...
'django_filters',
]
Then you create a FilterSet
import django_filters
class ProductFilter(django_filters.FilterSet):
name = django_filters.CharFilter(lookup_expr='iexact')
class Meta:
model = Product
fields = ['price', 'release_date']
In your view you want somethign like this (for function based views)
def product_list(request):
f = ProductFilter(request.GET, queryset=Product.objects.all())
return render(request, 'my_app/template.html', {'filter': f})
And finally in your template you want something like this
...
<form method="get">
{{ filter.form.as_p }}
<input type="submit" />
</form>
<tbody>
{% for obj in filter.qs %}
<tr>
... render your table rows here using {{ obj }}
</tr>
{% endfor %}
</tbody>
...
You could also try different setups and the documentation on the library gives you a few examples.

Answer 2

You can filter dynamically the context in the view function that renders this page. So when you complete the form's fields, it makes a GET request to the server, the parameters that you need to filter the data are in this request. Then, you only need to filter the query with this parameters. Here you have the Django guide for make queries. Making queries | Django
I suggest you show the function code on your view.py file so we can understand how you are filtering the data.

Answer 3

You can filter the table with JavaScript and a input. If you are using Bootstrap:
https://www.w3schools.com/bootstrap/bootstrap_filters.asp
Template code with Bootstrap would look like this:
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<table>
<thead>
<tr>
<th>N°Commande</th>
<th>Magasin</th>
<th>Objet</th>
<th>Date commande</th>
<th>Montant</th>
<th>Etat</th>
</tr>
</thead>
<tbody id="myTable">
{% for item in query_results %}
<tr>
<td>{{ item.numero_commande }}</td>
<td>{{ item.enseigne}}</td>
<td>{{ item.Objet}}</td>
<td>{{ item.Date_commande}}</td>
<td>{{ item.Montant}}</td>
<td>{{ item.Etat}}</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>