jquery - 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. 在页面完全呈现后，在 jquery 函数中获取查询集的 json 模拟，并将其附加到“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 表单集呈现的，那么我不知道如何通过 json 在 jquery 中呈现该表。其次，我将不得不编写大量 js 脚本来克隆我已经在 Django 模板 for 循环中编写的代码。这意味着每次我更改模板中的某些内容时，我都必须修改我的 js 代码。我确信有一种更干净、更直接的方法可以做到这一点。

或者，我可以放弃 Django 模板，而纯粹用 js 编写表代码。这种方法的缺点似乎是牺牲了 Django 表单集，这些表单集对于使表格单元格可编辑以及将用户更新保存到数据库的功能非常有值(value)。谁能给我提示如何做到这一点？即使是高级别的推荐或关键词也应该受到赞赏。我不知道从哪里开始以及谷歌什么。

Answer 1

如果想异步加载数据，可以使用infinite scrolling with Django and some Javascript正如 Vitor Freitas 所解释的:

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

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

and urls.py:

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

然后在模板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>