Django + Ajax - 在页面加载时呈现小部分大数据

我有一个Django应用程序呈现大型表格。我的全球目的是在页面加载时只渲染一小部分表格，比如10-20条记录，以便用户不会等待数年，然后在后台ajax调用中异步上传表格的其余部分，使行不可见。然后，随着用户向下滚动，这些行连续显示出来。Django + 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框架，这对于使表格单元格可编辑以及将用户更新保存到数据库的功能非常有价值。任何人都可以给我一个提示如何做到这一点？即使是高层建议或关键字，也应该感激。我不知道从哪里开始，以及谷歌。

来源

2016-07-22 Edgar Navasardyan

如果你想异步加载数据，你可以使用无限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>

来源

2017-09-11 11:33:18 iMitwe

Django + Ajax - 在页面加载时呈现小部分大数据

回答

相关问题