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-analogue，将其附加到'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 formsets呈现的，那么我不知道如何通过json在jquery中呈现表。第二，我将编写很多js脚本来克隆我已经在Django模板中编写的代码用于循环。这意味着每次我在模板中更改某些内容时，我都必须修改我的js代码。我确信有一种更清洁，更直接的方法。

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

Answer 1

如果要异步加载数据，可以使用Vitor Freitas所解释的无限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'),

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

Django + Ajax - 在页面加载时渲染大部分数据

1 个答案: