Javascript Django：如何在过滤后刷新表而不刷新整个页面？_Javascript_Python_Django_Python 3.x

Javascript Django：如何在过滤后刷新表而不刷新整个页面？

javascript python django python-3.x

Javascript Django：如何在过滤后刷新表而不刷新整个页面？,javascript,python,django,python-3.x,Javascript,Python,Django,Python 3.x,问题的根源在于如何动态刷新筛选表，而不刷新整个页面我几乎是python/html/css方面的新手，所以请像新手一样发表一些评论[谢谢]。在对StackOverFlow进行了一些研究之后，我发现它可以用js制作，但我几乎没有使用js的经验，我不知道如何在Django中使用它是否有可能只使用Django工具？它的效率有多高？也许你可以提供一些解决问题的例子模型如下： class Player(models.Model): last_name = models.CharField(

问题的根源在于如何动态刷新筛选表，而不刷新整个页面

我几乎是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'
        )

以下是问题-视图/模板

在我看来，我正在使用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>


{%block content%}
{{filter.form.as_table}
好啊
{%endblock%}
{%render_table%}

我想我应该添加一些脚本，但我还不知道如何使用js

问题：选择过滤器并按OK后，整个页面将用新数据刷新

我想要唯一一张桌子被刷新

请告诉我怎么做

非常感谢。

查看django filter文档（），此应用程序在后端进行过滤。我没有看到执行任何javascript代码来执行此操作，它处理视图中的过滤逻辑。因此，这就是为什么应用程序需要刷新页面以显示过滤后的表

我建议您使用javascript实现过滤功能。您需要识别要筛选的表元素、触发器元素（下拉列表和搜索框，如django filter中的）并将它们链接起来，以对DOM进行修改。这样，您就可以拥有一个动态表过滤器

这两个链接可以让您开始了解以下内容：

[1]

[1] JS

Ajax查询/requestsYep，我知道，但我需要一个使用django表/filters的示例您是否使用复选框作为过滤器？按钮？还是怎样您可以通过澄清来帮助我们。@AlanAvalos，我使用django过滤器模块：有两个文本搜索字段和两个下拉列表。谢谢，我会尽力理解的。

(function(document) {
'use strict';

var LightTableFilter = (function(Arr) {

    var _input;
var _select;

    function _onInputEvent(e) {
        _input = e.target;
        var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
        Arr.forEach.call(tables, function(table) {
            Arr.forEach.call(table.tBodies, function(tbody) {
                Arr.forEach.call(tbody.rows, _filter);
            });
        });
    }

    function _onSelectEvent(e) {
        _select = e.target;
        var tables = document.getElementsByClassName(_select.getAttribute('data-table'));
        Arr.forEach.call(tables, function(table) {
            Arr.forEach.call(table.tBodies, function(tbody) {
                Arr.forEach.call(tbody.rows, _filterSelect);
            });
        });
    }

    function _filter(row) {

        var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
        row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';

    }

    function _filterSelect(row) {

        var text_select = row.textContent.toLowerCase(), val_select = _select.options[_select.selectedIndex].value.toLowerCase();
        row.style.display = text_select.indexOf(val_select) === -1 ? 'none' : 'table-row';

    }

    return {
        init: function() {
            var inputs = document.getElementsByClassName('light-table-filter');
            var selects = document.getElementsByClassName('select-table-filter');
            Arr.forEach.call(inputs, function(input) {
                input.oninput = _onInputEvent;
            });
            Arr.forEach.call(selects, function(select) {
     select.onchange  = _onSelectEvent;
            });
        }
    };
})(Array.prototype);

document.addEventListener('readystatechange', function() {
    if (document.readyState === 'complete') {
        LightTableFilter.init();
    }
});

})(document);