Python Django, как сделать вместо пагинации показать больше + ajax?

Question

[Sergey0808]

Views:

def pagination_ajax(request):
        if request.is_ajax():
            elem = request.GET.get('value', 10)
            news = serializers.serialize('json', News.objects.all()[:elem])
            return HttpResponse(news, content_type='application/json')
<code>
url: 
url(r'^ajax/paginate$', views.pagination_ajax, name='paginate_ajax')

Button:
<button type="submit" id="pagination">Показать больше</button>

JS:
    $('#pagination').click(function () {
        $.ajax({
            type: 'get',
            url: 'http://127.0.0.1:8000/news/ajax/paginate',
           dataType: "json"

      });
   });
Как исправить чтоб работало?

Comments

[javedimka]

Тут не исправлять надо, а дописывать.

[Петр]

Пагинация это таже самая "показать больше", только с удалением/фильтрованием старых записей.

[Sergey0808]

javedimka, обьясните, если не сложно что дописывать

[javedimka]

Sergey0808, Ну например добавление ответа от вьюхи на страницу.

[Sergey0808]

javedimka, Подробнее

[AlexandrBirukov]

Если велосипед не изобретать, то можно вот это использовать.

[Sergey0808]

Вы это использовали ?

[Sergey0808]

AlexandrBirukov, Не получилось подключить

[AlexandrBirukov]

Sergey0808, как так то?))) там подробная документация
постоянно пользуюсь

Answer 1

[Виктор]

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

Код 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 - который вставляется в соответсвующий блок.

Надеюсь поможет :)

Comments

[Sergey0808]

Cпасибо, помогло)