Good day!

The essence of the question is how to implement a dynamic update of the table when selecting filters through the form.

In python / html / css, I am more or less a beginner, so the question may seem simple, but please help with the answer. When googling and searching StackOverFlow I found that this is done using js , but because of the almost zero knowledge of js, I can’t figure out how to use this in Django .

Is there a way to do this with Django? And how effective will it be? Perhaps there are some examples of solutions to this situation.

The model has the following form:

class Player(models.Model): last_name = models.CharField( null=True, blank=True, max_length=255, verbose_name="прізвище" ) first_name = models.CharField( null=True, blank=True, max_length=255, verbose_name="ім'я" ) city = models.ForeignKey( City, on_delete=models.SET_NULL, null=True, blank=True, verbose_name="місто" ) rating = models.PositiveIntegerField( null=True, blank=True, verbose_name="рейтинг" ) rank = models.ForeignKey( Rank, on_delete=models.SET_NULL, null=True, blank=True, verbose_name="ранг" ) local_rank = models.ForeignKey( LocalRank, null=True, blank=True, on_delete=models.SET_NULL, verbose_name="розряд" ) def __str__(self): if self.last_name and self.first_name: return self.last_name + ' ' + self.first_name elif self.egd_last_name and self.egd_first_name: return self.egd_last_name + ' ' + self.egd_first_name else: return self.id 

To display the table, I use django-tables2 :

 class PlayerTable(tables.Table): full_name = tables.LinkColumn( accessor="__str__", verbose_name="Прізвище та ім'я", order_by="last_name", viewname='UGD:player_info', empty_values=(), args=[A('pk')] ) local_rank = tables.Column( accessor="local_rank.abbreviate", order_by="id" ) ufgo_member = tables.BooleanColumn( verbose_name="Член УФГО" ) class Meta: model = Player fields = ( 'id', 'full_name', 'city', 'rating', 'rank', 'local_rank', 'ufgo_member' ) attrs = {'class': 'main'} 

For filters I use django-filter :

  class PlayersFilter(django_filters.FilterSet): last_name = django_filters.CharFilter( lookup_expr='contains', label="Прізвище" ) first_name = django_filters.CharFilter( lookup_expr='contains', label="Ім'я" ) city = django_filters.ChoiceFilter( choices=[(city.id, city.name) for city in City.objects.all()], empty_label="--Не обрано--", label="Місто" ) ufgo_member = django_filters.ChoiceFilter( choices=[ (False, 'Ні'), (True, 'Так') ], name="ufgo_member", label="Член УФГО", ) class Meta: model = Player fields = ( 'last_name', 'first_name' ) 

Questions concern what is next - view / template.

In the view I use SingleTableMixin and FilterView to process the table and filters:

 class RatingListView(SingleTableMixin, FilterView): table_class = PlayerTable table_pagination = False template_name = 'UGD/rating_list.html' filterset_class = PlayersFilter 

Here I have an idea to divide the presentation into several components, and to call one representation from another, but so far I have not mastered it. Perhaps there will be some suggestions for improvement?

I now have this in the body of the template:

 <body> <div class="filter"> <form id="filter_submit" class="filter"> {% block content %} <div class="filter"> <table class="filter"> {{ filter.form.as_table }} </table> <button id="filter_submit_button" type="submit">OK</button> </div> {% endblock %} </form> </div> <div> {% render_table table %} </div> </body> 

Here there is an idea that you need to add some kind of script, but since I am only learning js , I can’t understand how it does.

Sample page

As a result: when I select the filters I need and click on OK, the page reloads and the necessary data is displayed

I would like to avoid that.

Can you please tell us how to modify the presentation and page template in order to fulfill your plans?

Thank you very much.

    1 answer 1

    The page is dynamically updated using the javascript language embedded in the browser: changing the appearance of the page using DHTML (dynamic html), manipulating the DOM tree (document object model), and queries to the server without reloading the page using AJAX technology or websocket.