J'essaie de former un modèle en utilisant des tables de données. Pour une raison quelconque, mes tables de données ne fonctionnent pas correctement.
Ceci est mon base.html, je mets le Jquery en bas de la page afin que je puisse réutiliser la requête à chaque fois.
'''
{% extends "base.html" %} {% block content %}
<table id="table1">
<thead>
<tr>Company Name</tr>
<tr>Pre Money Value</tr>
<tr>Post Money Value</tr>
<tr>Round Size </tr>
<tr>Investment Cost </tr>
<tr>Status </tr>
</thead>
</table>
{% endblock %}
'''
C'est là que je prévois de l'utiliser. pour une raison quelconque, le thead ne produit pas la table comme prévu.
'''
<head>
</head>
<body>
{% block content %} {% endblock %}
<script src="static/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
<script>
$(function () {
$('#table1').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
});
});
</script>
</body>
'''
Toute aide sera pleinement appréciée
3 Réponses :
DataTables attend un tableau HTML entièrement formé, ce qui vous manque.
Depuis le site DataTables:
Pour que DataTables puisse fonctionner correctement, le HTML de la table cible doit être présenté de manière bien formée avec les sections «thead» et «tbody» déclarées.
Par exemple:
$(document).ready( function () {
$('#myTable').DataTable();
} );
Notamment, votre table manque <tbody> . Votre code n'indique pas clairement ce que vous avez réellement l'intention d'avoir dans le corps du tableau, mais vous devrez également vous assurer que vos données sont conformes aux lignes / colonnes appropriées.
Je suggérerais également d'utiliser $(document).ready(); , sauf si vous associez votre fonction à une pression sur un bouton ou à quelque chose.
Également à partir du site DataTables:
<table id="table_id">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
J'ai essayé cela, pour une raison quelconque, la tête ne s'affiche pas La console a des erreurs mais je ne sais pas comment y remédier
jquery.min.js:2 Uncaught TypeError: Cannot read property 'aDataSort' of undefined
at _fnSortFlatten (jquery.dataTables.js:5889)
at _fnSortingClasses (jquery.dataTables.js:6227)
at loadedInit (jquery.dataTables.js:1208)
at HTMLTableElement.<anonymous> (jquery.dataTables.js:1306)
at Function.each (jquery.min.js:2)
at k.fn.init.each (jquery.min.js:2)
at k.fn.init.DataTable [as dataTable] (jquery.dataTables.js:869)
at k.fn.init.$.fn.DataTable (jquery.dataTables.js:15161)
at HTMLDocument.<anonymous> (test:318)
at e (jquery.min.js:2)
Attention, si vous ne répondez pas à la réponse que j'ai publiée, je ne serai pas informé que vous avez posté ici. Je dépannerais le chargement du script en haut de votre page et en utilisant l'exemple de tableau fourni par DataTables.net pour voir si vous pouvez le faire fonctionner comme base de référence.
Voici un très bon article sur datatables.net dans Flask: son POC fonctionne très bien. :)