django-plotly-dash
django-plotly-dash copied to clipboard
GibbsConsulting
Pagination DataTable don't work with plotly_direct
Pagination DataTable as in example https://dash.plotly.com/datatable/callbacks don't work with plotly_direct tag
@alexeydg is there more information available to help understand the issue?
In particular:
- do you have a simple replication of the issue?
- what versions of django, dash, django-plotly-dash, etc are you using?
- is there a specific meaning to "don't work"?
For this particular issue, does it work for other tags such as plotly_app and plotly_app_bootstrap?
django 3.2.17 dash 2.8.1 django-plotly-dash 2.1.3
{%load plotly_dash%}
{%block content%}
<div style="width:100%;height:100%;">
{%plotly_direct name="DashCreate" %}
</div>
{%endblock%}
....
dash_table.DataTable(
id='datatable-paging',
columns=[
{"name": "id", "id": "id"},
{"name": "Название", "id": "name"},
{"name": "Статус", "id": "status", 'editable': False, 'type': 'text', "presentation" :'markdown'},
],
markdown_options={"link_target": '_blank',"html":True,},
page_current=0,
page_size=PAGE_SIZE,
page_action='custom',
),
.....
@app.callback(
Output('datatable-paging', 'data'),
Input('datatable-paging', "page_current"),
Input('datatable-paging', "page_size"))
def update_table(page_current,page_size):
projects = Project.objects.all()[page_current * page_size:(page_current + 1) * page_size]
data = []
for project in projects:
ar = model_to_dict(project)
ar['status'] = '<b>'+project.get_status_display()+'</b>'
data.append(ar)
df = pd.DataFrame(data)
print(df, page_current,page_size, data)
return df.to_dict('records')
If click on pages in table pagination then page don't change, variable page_current don't change if change tag plotly_direct to plotly_app then pagination work
Are there any errors in the console, or files not being loaded in the plotly_direct case?
this is adminlte template
<html lang="en">
<head>
<title>{% block title %}{% endblock %}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load plotly_dash%}
{% load static%}
{% plotly_header%}
<link rel="stylesheet" href="{% static 'dist/bootstrap.css' %}">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
<link href="{% static 'ajax_datatable/css/style.css' %}" rel="stylesheet" />
<link rel='stylesheet' href="{% static 'plugins/datatables-bs4/css/dataTables.bootstrap4.min.css' %}">
<link rel='stylesheet' href="{% static 'plugins/datatables-buttons/css/buttons.bootstrap4.min.css' %}">
<link rel="stylesheet" href="{% static 'dist/main.css' %}">
</head>
<body class="hold-transition sidebar-mini layout-fixed" data-panel-auto-height-mode="height">
...
{% block content %}
{% endblock %}
....
<script src="{% static 'dist/bootstrap.js' %}"></script>
<script src="{% static 'plugins/jquery-ui/jquery-ui.min.js' %}"></script>
<script>$.widget.bridge('uibutton', $.ui.button)</script>
<script src="{% static 'dist/main.js' %}"></script>
<script type="text/javascript" src="{% static 'ajax_datatable/js/utils.js' %}"></script>
<script src="{% static 'plugins/datatables/ru.js' %}"></script>
<script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.print.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.bootstrap.min.js' %}"></script>
<script src="{% static 'plugins/jszip/jszip.min.js' %}"></script>
<script src="{% static 'plugins/pdfmake/pdfmake.min.js' %}"></script>
<script src="{% static 'plugins/pdfmake/vfs_fonts.js' %}"></script>
{% plotly_footer%}
{% block extrajs %}
{% endblock %}
</body>
</html>
Other than a lot of js files being involved, there doesn't look to be anything obvious from that template. Given your app works when contained within the iframe of the non-direct tag, the natural candidate is some sort of conflict between these multiple files.
However, if there is no error in the browser console, its a bit hard to track down. I'd be tempted to not use the direct tag - is there anything that stops you using one of the other template tags to embed your app?
the customer's wish not to use the iframe in the project. I'll try to disable other js scripts and check if there will be an error without them. thk