1

Добрый день!

Суть вопроса заключается в том, как осуществить динамическое обновление таблицы при выборе фильтров через форму.

В python/html/css я более менее начинающий, поэтому вопрос может показаться простым, но прошу помочь ответом. При гуглении и поиску по StackOverFlow нашел, что это делается при помощи js, но из-за практически нулевых знаний js не могу понять как применить это в Django.

Есть ли способ осуществить это при помощи средств Django? И насколько это будет эффективно? Возможно есть какие-либо примеры решения данной ситуации.

Модель имеет следующий вид:

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

Для того, чтобы отобразить таблицу, я использую 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'}

Для фильтров использую 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'
        )

Вопросы касаются того, что дальше - view / template.

В представлении использую SingleTableMixin и FilterView для обработки таблицы и фильтров:

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

Здесь у меня есть идея разделить представление на несколько составляющих, и вызывать одно представление из другого, но пока что я это не освоил. Возможно будут какие-то предложения для улучшения?

В теле шаблона у меня сейчас это:

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

Здесь есть идея, что нужно добавить какой-то скрипт, но так как я js только осваиваю, не могу понять как это делает.

Пример странички

В итоге: при выборе нужных мне фильтров и нажатии на ОК, у меня перезагружается страница и отображаются нужные данные

Этого мне хотелось бы избежать.

Подскажите, пожалуйста, каким образом модифицировать представление и шаблон страницы, чтобы выполнить задуманное?

Большое спасибо.

1 ответ 1

0

Динамическое обновление страницы осуществляется при помощи языка javascript встроенного в браузер: изменение внешнего вида страницы при помощи DHTML(динамический html), путём манипуляций с деревом DOM(объектная модель документа), а запросы к серверу без перезагрузки страницы при помощи технологии AJAX или websocket.

1

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.