Symfony + Datatable
Megastudio
Bonjour,
j'essaie d'afficher Datatable avec la pagination et la searchbar mais elles ne s'affichent pas
j'ai plein de message dans la console Jquery is undefined pas moyen ...
{% extends 'base.html.twig' %}
{% block title %}Hello DataController!
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
{% endblock %}
{% block javascripts %}
{# // <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> #}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js"></script>
<!-- Insert this at the end of your body element, but before the closing tag -->
<script src="{{ asset('bundles/datatables/js/datatables.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script type="text/javascript">
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
</script>
<!-- before the closing <body> tag -->
<script type="text/javascript">
$(document).ready(function () {
$('#datatable').DataTable({
pageLength: 10,
filter: true,
deferRender: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
"searching": true
});
});
</script>
{% endblock %}
{% block body %}
<style>
.example-wrapper {
margin: 1em auto;
max-width: 800px;
width: 95%;
font: 18px / 1.5 sans-serif;
}
.example-wrapper code {
background: #F5F5F5;
padding: 2px 6px;
}
</style>
<div class="container mt-5">
<div class="row">
<div class="col-12">
<table id="datatable" class="display table table-striped" style="width:100%">
<thead>
<tr>
<th>Identifiant</th>
<th>Nom</th>
<th>Prix</th>
<th>Quantité</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{% for material in materials %}
<tr>
<td>{{ material.id }}</td>
<td>{{ material.name }}</td>
<td>{{ material.price }}
€</td>
<td>{{ material.quantity }}</td>
</tr>
{% endfor %}
{# <td>{{ material.id }}</td>
<td>{{ material.name }}</td>
<td>{{ material.price }}
€</td>
<td>{{ material.quantity }}</td> #}
{# <td>{{ material.date }}</td> #}
</tbody>
</table>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
afficher
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{% for material in materials %}
<p>{{ material.price }}
€</p>
{% endfor %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>{% endblock %}
Ce que je veux
le même affichage que que ici (meme si j'ai que deux lignes :noel:
Ce que j'obtiens
https://image.noelshack.com/fichiers/2021/40/5/1633703826-capture.png
Uncaught TypeError: myModal is null
<anonymous> http://127.0.0.1:8000/data:29
data:29:1
jQuery.Deferred exception: e is undefined $a@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:54:1
ia@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:48:467
Ja/<@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:49:79
map/<@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:14:1567
map@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:14:3536
map@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:14:1535
Ja@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:49:44
f@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:123:344
u/<@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:124:15
each@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:14:3003
each@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:14:1481
u@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:114:53
l.fn.DataTable@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:203:103
@http://127.0.0.1:8000/data:38:17
e@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:14:30038
l/</t<@https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js:14:30340
j'ai tenté de remplacer plein de lien cdn pas moyen, merci à ceux qui m'aideront ...
ps: jamais touché Symfony ni Twig avant