Renderización de marco de datos a plantilla html en vista de tabla usando Django Framework

En Django, es fácil representar las plantillas HTML configurando las URL de las respectivas páginas HTML. Aquí le informaremos cómo podemos trabajar con DataFrame para modificarlos para la vista de tabla en la plantilla HTML o las páginas web, y para eso, tenemos que usar las funciones ‘render’ y ‘HttpResponse’ para manipular los datos dentro de la Marco de datos.

Marco de datos de muestra:

Métodos para representar el marco de datos en una plantilla html:

Usando pandas.DataFrame.to_html(): Usando esta función incorporada ‘ to_html() ‘ para convertir DataFrame en una plantilla HTML. Después de usar este método, el DataFrame general se convierte en un elemento html de ‘tabla’ , mientras que el nombre de cada columna se transforma en la etiqueta ‘thead’ del encabezado de la tabla. Mientras que cada fila del DataFrame se transforma en la etiqueta ‘tr’ del elemento de la fila de la tabla en la página de la plantilla HTML.
vistas.py

from django.shortcuts import HttpResponse
import pandas as pd
  
def Table(request):
    df = pd.read_csv("tableview/static/csv/20_Startups.csv")
    #'tableview/static/csv/20_Startups.csv' is the django 
    # directory where csv file exist.
    # Manipulate DataFrame using to_html() function
    geeks_object = df.to_html()
  
    return HttpResponse(geeks_object)

urls.py

"""
The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.0/topics/http/urls/Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name ='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name ='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from tableview import views
  
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.Table, name ="table"),
]

Producción:

Analizar DataFrame en objetos Json y renderizar en plantilla de arranque: aquí usamos la plantilla de arranque adecuada y obtenemos una vista de tabla usando la función render().

vistas.py

# Write Python3 code here
from django.shortcuts import render
import pandas as pd
import json
  
# Create your views here.
def Table(request):
    df = pd.read_csv("tableview/static/csv/20_Startups.csv")
  
    # parsing the DataFrame in json format.
    json_records = df.reset_index().to_json(orient ='records')
    data = []
    data = json.loads(json_records)
    context = {'d': data}
  
    return render(request, 'table.html', context)

table.html (‘Plantilla HTML de Bootstrap’)

<!-- Write HTML code here -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>TableView - Startup</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container">
  <h2 class="text-center"><u>20 - Startups Table</u></h2><br>            
  <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>R&D Spend</th>
        <th>Administration</th>
        <th>Marketing Spend</th>
        <th>State</th>
        <th>Profit</th>
      </tr>
    </thead>
    <tbody>
    <!-- jinja2 Technique -->
    {% if d %}  
    {% for i in d %}
      <tr>
        <td>{{i.RD_Spend}}</td>
        <td>{{i.Administration}}</td>
        <td>{{i.Marketing_Spend}}</td>
        <td>{{i.State}}</td>
        <td>{{i.Profit}}</td>
      </tr>
    {% endfor %}
    {% endif %}
    </tbody>
  </table>
</div>
  
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por night_fury1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta