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 - 在頁面加載時呈現小部分大數據

回答

相關問題