Django + Ajax - рендеринг небольшой части больших данных на загрузке страницы

Question

У меня есть приложение Django, отображающее большую таблицу. Моя глобальная цель состоит в том, чтобы отображать только небольшую часть таблицы, скажем, 10-20 записей, при загрузке страницы, чтобы пользователь не ждал лет, а затем асинхронно загружал остальную часть таблицы в фоновый вызов ajax, делая строки невидимыми. Затем, когда пользователь прокручивается вниз, ряды последовательно отображаются.

Я подготовил предварительную архитектуру, но это не кажется мне самым чистым способом сделать это.

То, что я планирую сделать, как сейчас может быть описана следующим образом:

Шаг 1. Рендер первые 10 строк, делая это:

view get_first_10_rows(request): 
    qs = some_orm_query[:10] 
    return render_to_response('order_scheduler/orders.html', 
           'qs':qs}, 
           context_instance=RequestContext(request)) 

Шаг 2. Get json-analogue запроса в функции jquery после того, как страница была полностью отображена, добавив ее в таблицу в режиме «display: none»:

Вид:

view get_entire_rows(request): 
     qs = some_orm_query.all() 
     return render_to_response('order_scheduler/orders.html', 
            'qs':qs}, 
            context_instance=RequestContext(request)) 

Jquery/AJAX

$(function() { 
    $.get(..., function(json_result){ 
     // loop through json 
     // append rows to the table and apply 'display:none' 
     // 
    }); 
}); 

Шаг 3.

Написать функцию JQuery, которая показывает скрытые строки, как свитки пользователя вниз страницы.

---

Есть две проблемы с этим. Во-первых, если рассматриваемая таблица отображается с помощью Django-форм, то я понятия не имею, как визуализировать таблицу в jquery через json. И во-вторых, мне придется написать много скриптов js, которые клонируют код, который я уже написал в шаблоне Django для цикла. Это означает, что каждый раз, когда я что-то меняю в шаблоне, мне приходится пересматривать код js. Я уверен, что есть более чистый и более простой способ сделать это.

В качестве альтернативы, я мог бы отказаться от шаблонов Django и написать код таблицы только в js. Недостатком этого подхода является жертва форм Django, которые очень ценны для создания редактируемых ячеек таблицы и функциональности сохранения пользовательских обновлений в БД. Может ли кто-нибудь дать мне подсказку, как это сделать? Следует приветствовать даже рекомендацию высокого уровня или ключевое слово. Я не знаю, с чего начать и что делать в Google.

Answer 1

Если вы хотите загрузить данные в асинхронном режиме, вы можете использовать бесконечное scrolling with Django and some Javascript, как объяснено Витор Фрейтас:

В models.py:

from django.db import models 

class Article(models.Model): 
    title = models.CharField(max_length=30) 
    body = models.TextField(max_length=2000) 
    date = models.DateTimeField() 
    author = models.CharField(max_length=30) in `views.py` : 

from django.views.generic.list import ListView 
from .models import Article 

class ArticlesView(ListView): 
    model = Article 
    paginate_by = 10 # where you define the 10 records you want the user to initially see 
    context_object_name = 'articles' 
    template_name = 'blog/articles.html' 

и urls.py:

from .views import ArticlesView 
. 
. 
. 
url(r'^articles$', ArticlesView.as_view(), name='articles'), 

А затем в templ ели articles.html:

<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script> 
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script> 
<script src="{% static 'js/infinite.min.js' %}"></script> 

<div class="infinite-container"> 
    {% for article in articles %} 
     <div class="infinite-item"> 
     <h3>{{ article.title }}</h3> 
     <p> 
      <small>{{ article.author }}/{{ article.date }}</small> 
     </p> 
     <p>{{ article.body|truncatechars:100 }}</p> 
     </div> 
    {% endfor %} 
    </div> 

    <div class="loading" style="display: none;"> 
    Loading... 
    </div> 

    {% if page_obj.has_next %} 
    <a class="infinite-more-link" href="?page={{ articles.next_page_number }}">More</a> 
    {% endif %} 

    <script> 
    var infinite = new Waypoint.Infinite({ 
     element: $('.infinite-container')[0], 
     onBeforePageLoad: function() { 
     $('.loading').show(); 
     }, 
     onAfterPageLoad: function ($items) { 
     $('.loading').hide(); 
     } 
    }); 
    </script>