Django как передать текст нажатой ссылки в URL на другой HTML странице, показывающей статические изображения?
У меня есть таблица тикеров на одной HTML-странице, и четыре графика, отображаемые на другой HTML-странице. Эти графики берутся из моей папки static/images, полной сотен изображений, названных по тикерам ETF. Если я нажму на тикер ETF "PSCD" в первой строке таблицы, как я могу связать его с другой HTML-страницей, чтобы она показывала только те изображения из моей папки static/images, имя файла которых содержит связанный тикер... в данном случае "PSCD" при нажатии. В примере кода charts.html ниже я жестко закодировал PSCD в теге изображения, но я хочу, чтобы это было динамически связано.
Ниже вы увидите мою страницу table.html, показывающую мою таблицу сверху. Далее идет charts.html, где я хочу, чтобы etf_ticker, на который кликнули в этой таблице, был вставлен в теги изображения, например <img src="{% static 'myapp/images/chart1_PSCD.jpg' %}" alt="chart1"/></div>, где вы видите, что я жестко закодировал "PSCD" в тег изображения. Но мне нужно, чтобы это было динамично, чтобы вы нажали на ссылку в table.html, и она вставилась в тег изображения в charts.html.
table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ETF Table</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/css/table_style.css' %}">
<style type="text/css"></style>
</head>
<body>
<div class="container">
<table id="table" class="table table-dark table-hover table-striped table-bordered table-sm">
<thead>
<tr>
<th data-sortable="true">ETF Ticker</th>
<th>ETF Name</th>
<th>Index Name</th>
</tr>
</thead>
<tbody>
{% if d %}
{% for i in d %}
<tr>
<td><a href="{% url 'myapp:charts' %}" target="_blank">{{i.etf_ticker}}</a></td>
<td><a href="{% url 'myapp:charts' %}" target="_blank">{{i.etf_name}}</a></td>
<td><a href="{% url 'myapp:charts' %}" target="_blank">{{i.index_name}}</a></td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
<script>
$('#table').DataTable({
"bLengthChange": true,
"lengthMenu": [ [20, 50, 100 -1], [20, 50, 100, "All"] ],
"iDisplayLength": 20,
bInfo: false,
responsive: true,
order: [[4, 'desc']],
});
</script>
</div>
</body>
</html>
charts.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charts</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/css/charts_style.css' %}">
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a class="nav" href="{% url 'myapp:index' %}">Home</a></li><br><br>
<li><a class="nav" href="{% url 'myapp:forecast_table' %}">Table</a></li><br>
</ul>
</nav>
<div class="container">
<div class="box"><img src="{% static 'myapp/images/chart1_PSCD.jpg' %}" alt="chart1"/></div>
<div class="box"><img src="{% static 'myapp/images/chart2_PSCD.jpg' %}" alt="chart2"/></div>
<div class="box"><img src="{% static 'myapp/images/chart3_PSCD.jpg' %}" alt="chart3"/></div>
<div class="box"><img src="{% static 'myapp/images/chart4_PSCD.jpg' %}" alt="chart4"/></div>
</div>
</body>
</html>
urls.py
from django.urls import path
from . import views
from .views import ChartView
app_name = 'forecast'
urlpatterns = [
path('', views.index, name='index'),
path('table/', views.table, name='table'),
path('charts/', ChartView.as_view(), name='charts'),
]
models.py
from django.db import models
class Table(models.Model):
etf_ticker = models.CharField(max_length=10)
etf_name = models.CharField(max_length=200)
index_name = models.CharField(max_length=200)
views.py
from django.shortcuts import render
from django.views.generic import TemplateView
from .models import Table
def index(request):
return render(request, 'index.html')
def forecast_table(request):
data = Table.objects.all().values()
context = {'d': data}
return render(request, 'table.html', context)
class ChartView(TemplateView):
template_name = 'charts.html'
Поправьте меня, если я ошибаюсь, но у вас есть страница графиков, которая отображает все возможные графики? И что вы хотите сделать: когда вы нажимаете на символ тикера в этой таблице, вы хотите, чтобы она перенаправляла на страницу графиков, но вместо того, чтобы показывать все графики, вы хотите показывать только графики, связанные с символом тикера.
Я бы предложил создать новый путь для страницы графиков (тот, который принимает параметр) и передать тикер в этот путь. Вы можете использовать его для фильтрации содержимого.
В вашем urls.py добавьте следующую строку:
from django.urls import path
from . import views
from .views import ChartView
app_name = 'forecast'
urlpatterns = [
path('', views.index, name='index'),
path('table/', views.table, name='table'),
path('charts/', ChartView.as_view(), name='charts'),
path('charts/<str:ticker>', ChartView.as_view(), name='filteredCharts')
]
В вашем views.py измените ChartView, чтобы принять параметр:
class ChartView(TemplateView):
template_name = 'charts.html'
def get(self, request, ticker):
return render(request, self.template_name, { 'ticker': ticker })
В charts.html отредактируйте тег source изображения следующим образом:
<img src="{% static 'myapp/images/chart4_'|add:ticker|add:'.jpg' %}" alt="chart4"/>
Я понял ответ после нескольких дней и многих часов. Теперь, когда я нажимаю на любую ссылку в любой строке, следующая html-страница показывает 4 графика данных, соответствующих etf_ticker этой строки таблицы.
Мне пришлось изменить следующее:
В table.html не понадобилось {% if d %} и добавлено i.id в тег href.
{% for i in d %}
<tr>
<td><a href="{% url 'myapp:charts' i.id %}" target="_blank">{{i.etf_ticker}}</a></td>
<td><a href="{% url 'myapp:charts' i.id %}" target="_blank">{{i.etf_name}}</a></td>
<td><a href="{% url 'myapp:charts' i.id %}" target="_blank">{{i.index_name}}
</tr>
{% endfor %}
В models.py мне пришлось добавить поля базы данных для хранения URL 4 графиков каждого etf_ticker для отображения в charts.html. После изменения модели я удалил все файлы, кроме init в папке migrations. Затем я запустил python manage.py makemigrations myapp, а затем python manage.py migrate. Это создало новую базу данных с нуля, в которую я заново загрузил свои данные.
from django.db import models
class Table(models.Model):
etf_ticker = models.CharField(max_length=10)
etf_name = models.CharField(max_length=200)
index_name = models.CharField(max_length=200)
index_ticker = models.CharField(max_length=200)
chart1 = models.CharField(max_length=10)
chart2 = models.CharField(max_length=200)
chart3 = models.CharField(max_length=200)
chart4 = models.CharField(max_length=200)
В views,py замените ChartView(TemplateView) на:
def charts_(request, pk):
charts = Table.objects.get(pk=pk)
context = {'charts': charts}
return render(request, 'charts.html', context)
В urls.py мне пришлось добавить <int:pk> к пути charts и удалить ChartView, а в urlpatterns изменить на views.charts_ с подчеркиванием, чтобы предотвратить любые конфликты имен между именем функции и именами переменных, также названных charts.
from django.urls import path
from . import views
app_name = 'myapp'
urlpatterns = [
path('', views.index, name='index'),
path('table/', views.table, name='table'),
path('charts/<int:pk>', views.charts_, name='charts'),
]
Наконец, в charts.html измените урлы тегов источника на следующие:
<div class="grid-container">
<img class="grid-item" src="{% static 'myapp/images/' %}{{charts.chart1}}" alt="chart1"/>
<img class="grid-item" src="{% static 'myapp/images/' %}{{charts.chart2}}" alt="chart2"/>
<img class="grid-item" src="{% static 'myapp/images/' %}{{charts.chart3}}" alt="chart3"/>
<img class="grid-item" src="{% static 'myapp/images/' %}{{charts.chart4}}" alt="chart4"/>
</div>