Задать вопрос
Ответы пользователя по тегу Django
  • Python Django, как сделать вместо пагинации показать больше + ajax?

    @koders
    инженер
    Приблизительно так:

    Код view:
    def projects_list_view(request):
        projects_per_page = 9
        projects = Project.objects.language(request.LANGUAGE_CODE).all().order_by('order').select_related('customer')
        paginator = Paginator(projects, projects_per_page)
        page = request.GET.get('page')
        try:
            projects = paginator.page(page)
        except PageNotAnInteger:
            projects = paginator.page(1)
        except EmptyPage:
            if request.is_ajax():
                return HttpResponse('')
            projects = paginator.page(paginator.num_pages)
        if request.is_ajax():
            return render(request, 'projects/_list_ajax.html', {'projects': projects})
        return render(request, 'projects/_list.html', {'projects': projects, 'seo': seo,
                                                              'page_description': page_description})


    Код шаблона _list.html:
    <div class="row" id="project_list">
                {% include 'projects/project_list_ajax.html' %}
            </div>
            <div class="row" id="preloader">
                .....
            </div>
            <div class="row">
                <div class="col m12 s12 center-align">
                    <button class="btn waves-effect waves-light" id="lazy_more">
                        {% trans 'More projects' %}
                    </button>
                </div>
            </div>


    Код шаблона _list_ajax.html:
    {% for project in projects %}
            <div class="col m4 s12">
                <div class="card large sticky-action">
                    <div class="card-image waves-effect waves-block waves-light">
                        {% if project.image %}
                            <img src="{{ project.image.url }}" class="activator" alt="{{ project.title }}">
                        {% endif %}
                    </div>
                    <div class="card-content">
                        <h4 class="card-title activator">
                            {{ project.title }}
                            <i class="material-icons right">more_vert</i>
                        </h4>
                        <div class="card-customer">
                            <h6>{{ project.customer.title|upper }}</h6>
                            <span>{{ project.customer.description }}</span>
                        </div>
                    </div>
                    <div class="card-reveal">
                        <h4 class="card-title">
                            {{ project.title }}
                            <i class="material-icons right">close</i>
                        </h4>
                        {{ project.description }}
                    </div>
                </div>
            </div>
    {% endfor %}


    Код js:
    var page = 1;
    var empty_page = false;
    var block_request = false;
    
    $('#lazy_more').click(function (e) {
        e.preventDefault();
        if (empty_page === false && block_request === false) {
            block_request = true;
            page += 1;
            $('#preloader').show();
            $.get('?page=' + page, function (data) {
                $('#preloader').hide();
                if (data === '') {
                    empty_page = true;
                } else {
                    block_request = false;
                    $('#project_list').append(data);
                }
            });
        }
    });


    "Lazy load" реализовывал как пагинацию сделаную на django. При первом запросе рендериться основной шаблон с инклудом _list_ajax.html в который передаются данные, которые необходим отрендерить. При нажатии кнопки "Больше" - отправляется get ajax запрос с номером следующей страницы - если она есть то в ответе приходит отрендеренный шаблон _list_ajax.html - который вставляется в соответсвующий блок.

    Надеюсь поможет :)
    Ответ написан
    1 комментарий