Pagination on Pandas Dataframe in Django

Question

I Have data in Postgresql and getting that data through ORM query into my dataframe named as data, My view.py is given below:

view.py

from operator import index
from django.shortcuts import redirect, render
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
from django.shortcuts import render
from bar_chart.models import AirQuality
from django.core.paginator import Paginator

#from django.views.generic import TemplateView
#from django.shortcuts import render
#from django.db.models import Sum
from django.db.models import Avg
from django.http import JsonResponse
from bar_chart.models import AirQuality
#from .models import *
import pandas as pd

# Create your views here.
def authenticate(request):
    count= User.objects.count()
    data= AirQuality.objects.all().values()
    print(data)
    df= pd.DataFrame(data)
    df1= df.tail(10)
    mydic = {
        "df": df1.to_html()
        #"count": count
    }
    return render(request, 'auth_home.html', context=mydic) 

    #, {'count':count}

I want to render those pages of pandas dataframe (All data not just the tail of data) in my auth_home.html. What would be the way out (code) to apply django pagination on my pandas dataframe?

You may find answer here: https://docs.djangoproject.com/en/3.0/topics/pagination/ — Karioki, Jul 09 '21 at 06:09
@Karioki i want to apply pagination on whole pandas dataframe. In documentation it is missing. Documentation is for general data which has been fetched through ORM. While i am storing data in dataframe and then want to visualize that dataframe. Need guideline particular for pandas dataframe. please — Filbadeha, Jul 09 '21 at 06:20

score 0 · Accepted Answer · answered Aug 14 '21 at 10:01

I was able to solve my question by following the django documentation on pagination from here. As i have data in the postgresql. Therefore i have made the model and fetched that all data by making another Table inside the div. Therefore, i have edited my index.html file and imported data from my model. The following line

{% for contact in page_obj %}

was life saver from which i have surrounded my table and all the rows from my database has been inserted one by one in my destination table which I created above in index.html .

My updated index.html is as follows:

   <div class="col">
                        <table class="table bg-white rounded shadow-sm  table-hover">
                            <thead>
                                <tr>
                                    <th scope="col" width="50">#</th>
                                    <th scope="col">ID</th>
                                    <th scope="col">Location</th>
                                    <th scope="col">Carbon Monoxide (CO)</th>
                                    <th scope="col">Nitrogen Oxide (NO)</th>
                                    <th scope="col">Amonia (NH3)</th>
                                    <th scope="col">Carbon Dioxide (CO2)</th>
                                    <th scope="col">VOC</th>
                                    <th scope="col">PM1</th>
                                    <th scope="col">PM2</th>
                                    <th scope="col">PM3</th>
                                    <th scope="col">PM4</th>
                                    <th scope="col">PM5</th>
                                    <th scope="col">PM6</th>
                                    <th scope="col">PM7</th>
                                    <th scope="col">Created At</th>
                                    <th scope="col">Updated At</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for contact in page_obj %}
                                
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>{{ contact.id}}</td>
                                        <td>{{ contact.loc}}</td>
                                        <td>{{ contact.co}}</td>
                                        <td>{{ contact.no2}}</td>
                                        <td>{{ contact.nh3}}</td>
                                        <td>{{ contact.co2}}</td>
                                        <td>{{ contact.voc}}</td>
                                        <td>{{ contact.pm1}}</td>
                                        <td>{{ contact.pm2}}</td>
                                        <td>{{ contact.pm3 }}</td>
                                        <td>{{ contact.pm4 }}</td>
                                        <td>{{ contact.pm5 }}</td>
                                        <td>{{ contact.pm6 }}</td>
                                        <td>{{ contact.pm7 }}</td>
                                        <td>{{ contact.created_at }}</td>
                                        <td>{{ contact.updated_at }}</td>
                                    </tr>
                                {% endfor %}
                                
                            </tbody>
                        </table>
                        <div class="pagination">
                            <span class="step-links">
                                {% if page_obj.has_previous %}
                                    <a href="?page=1">&laquo; first</a>
                                    <a href="?page={{ page_obj.previous_page_number }}">previous</a>
                                {% endif %}
                        
                                <span class="current">
                                    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
                                </span>
                        
                                {% if page_obj.has_next %}
                                    <a href="?page={{ page_obj.next_page_number }}">next</a>
                                    <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
                                {% endif %}
                            </span>
                        </div>
                        <div class = "card">
                            <h1>Pollution Sensor Latest Data</h1>  
                            {{df|safe}}
                        </div>
                        

                    </div>

Pagination on Pandas Dataframe in Django

1 Answers1