Bonjour,

j'ai un problème d'affichage de Datatable.

Sur chaque onglet figure un tableau avec un Datable :
- sur le premier onglet le datatable s'affiche correctement mais sur les deux autres onglets non. je vous bien le tableau mais le javascript datable ne fonctionne pas.

J'ai utilisé le même table id pour les 3 tableaux qui sont référencés sur un fichier Javascript datatable.

Pensez-vous que c'est juste un problème de fermeture <div> dans mon code ou eest-ce lié au table id ?

Merci à vous.

Bonjour,

Un identifiant html (attribut id) doit normalement être unique, le problème vient surement de là. Regarde la console de ton navigateur pour voir les éventuelles erreurs javascript.
Utilise le validateur w3c pour vérifier que ton code html est correct : https://validator.w3.org/

Bonjour,

merci de cette réponse.

La console ne m'indique aucune erreur dans ce sens.

Quant à l'attribut unique, j'ai essayé d'attribuer un autre id à l'autre tableau et de :
- dupliquer le fichier Javascript datatable
- en y mentionnant le nouvel id...
- et d'identifier le script dans mon fichier php...

Toujours pareil. Dans le deuxième tableau pas d epossibilité de trier mon tableau par l'intermédiaire du datatable.

Essaye de nous partager un exemple minimaliste de code avec lequel tu rencontres ton problème, difficile de deviner sans voir ton code.

Dans l'exemple basique de la doc, les tableaux n'ont pas d'id et sont tous initialisés via une classe css commune (table.display) : https://datatables.net/examples/basic_i ... ables.html

Je débute en PHP.

Je m'exerce en essayant de développer une application.

Voici l'extrait de code qui pose problème : si c'est trop illisible je renverrai... :

<!-- Start tabs area-->
<div class="tabs-info-area">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="widget-tabs-int">
<div class="tab-hd">
<h2>Tabs</h2>
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
</div>

<div class="widget-tabs-list">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Suivi des documents contractuels</a></li>
<li><a data-toggle="tab" href="fc_echeances.html#menu1">Suivi des échéances de facturation</a></li>
<li><a data-toggle="tab" href="#menu2">Suivi de facturation</a></li>
</ul>
<div class="tab-content tab-custom-st">
<!-- Tabs contenu 1-->
<div id="home" class="tab-pane fade in active">
<div class="tab-ctn">
<!-- Data Table area Start-->
<div class="data-table-area">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="data-table-list">
<div class="basic-tb-hd">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<h2>Contractualisation Client</h2>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
<div class="btn-list"> <button class="btn btn-primary notika-btn-primary btn-sm" data-toggle="modal" data-target="#myModalthree"> Nouvelle convention </button>
</div>
</div>
</div>
</div>

<div class="small text-muted mb-2">
<a class="btn btn-default" href="fc_conventions_borie.php"> Borie L.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'Austria');">Bordes M.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'Helen');">Cerez E.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Gauthier S.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Mallet M.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Mozzi M-P.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Oulhen G.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Porchas H.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Punsola R.</a>
<a class="btn btn-danger" href="#" onclick="$('table').tableFilter('filterRows', '');">Tous</a>
</div>
<br>


</div>
</div>
</div>
</div>
<!-- Data Table area End-->
</div>
</div>
<!-- Fin Tabs contenu 1-->
<!-- Tabs contenu 1-->
<div id="menu1" class="tab-pane fade in active">
<div class="tab-ctn">
<!-- Data Table area Start-->
<div class="data-table-area">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="data-table-list">
<div class="basic-tb-hd">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<h2>xxxx Client</h2>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
<div class="btn-list"> <button class="btn btn-primary notika-btn-primary btn-sm" data-toggle="modal" data-target="#myModalthree"> Nouvelle convention </button>
</div>
</div>
</div>
</div>

<div class="small text-muted mb-2">
<a class="btn btn-default" href="fc_conventions_borie.php"> Borie L.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'Austria');">Bordes M.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'Helen');">Cerez E.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Gauthier S.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Mallet M.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Mozzi M-P.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Oulhen G.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Porchas H.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Punsola R.</a>
<a class="btn btn-danger" href="#" onclick="$('table').tableFilter('filterRows', '');">Tous</a>
</div>
<br>

<div class="table-responsive">
<table id="data-table-basic" class="table table-striped" data-order="[[ 4, &quot;desc&quot; ]]">
<thead>
<tr>
<th>Conv.</th>
<th>Statut</th>
<th>Début</th>
<th>Fin</th>
<th>Statut Admin.</th>
<th>Statut Financ.</th>
<th>AT</th>
<th>RD</th>
<th>SG</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($lignes as $ligne) { ?>
<tr>
<td><?php echo $ligne['num_conv']; ?></td>
<td class="text-center"> <?php if($ligne['status'] == 1): ?> <button class="btn btn-success notika-btn-success" disabled="disabled">En cours</button>
<?php elseif($ligne['status'] == 0): ?> <button class="btn btn-default notika-btn-default" disabled="disabled">Clôturé</button>
<?php else: ?> <button class="btn btn-warning notika-btn-warning" disabled="disabled">Non démarré</button>
<?php endif; ?> </td>
<td><?php echo date("d-m-Y",strtotime($ligne['date_debut'])); ?></td>
<td><?php echo date("d-m-Y",strtotime($ligne['date_fin'])); ?></td>
<td class="text-center"> <?php if($ligne['statut_admin'] == 1): ?> <button class="btn btn-success notika-btn-success" disabled="disabled">Complet</button>
<?php else: ?> <button class="btn btn-warning notika-btn-warning" disabled="disabled">Incomplet</button>
<?php endif; ?> </td>
<td class="text-center"> <?php if($ligne['statut_financ'] == 1): ?> <button class="btn btn-success notika-btn-success" disabled="disabled">Complet</button>
<?php else: ?> <button class="btn btn-warning notika-btn-warning" disabled="disabled">Incomplet</button>
<?php endif; ?> </td>
<td class="text-center"> <?php if($ligne['contact_at'] == 0): ?> <span>Borie</span>
<?php elseif($ligne['contact_at'] == 1): ?> <span>Bordes</span>
<?php elseif($ligne['contact_at'] == 2): ?> <span>Cerez</span>
<?php elseif($ligne['contact_at'] == 3): ?> <span>Gauthier</span>
<?php elseif($ligne['contact_at'] == 4): ?> <span>Mallet</span>
<?php elseif($ligne['contact_at'] == 5): ?> <span>Mozzi</span>
<?php elseif($ligne['contact_at'] == 6): ?> <span>Oulhen</span>
<?php elseif($ligne['contact_at'] == 7): ?> <span>Porchas</span>
<?php elseif($ligne['contact_at'] == 8): ?> <span>Punsola</span>
<?php else: ?> <span>Supiot</span>
<?php endif; ?> </td>
<td class="text-center"> <?php if($ligne['contact_rd'] == 0): ?> <span>Dalet</span>
<?php elseif($ligne['contact_rd'] == 1): ?> <span>B</span>
<?php elseif($ligne['contact_rd'] == 2): ?> <span>C</span>
<?php elseif($ligne['contact_rd'] == 3): ?> <span>D</span>
<?php elseif($ligne['contact_rd'] == 4): ?> <span>E</span>
<?php elseif($ligne['contact_rd'] == 5): ?> <span>F</span>
<?php elseif($ligne['contact_rd'] == 6): ?> <span>G</span>
<?php elseif($ligne['contact_rd'] == 7): ?> <span>H</span>
<?php elseif($ligne['contact_rd'] == 8): ?> <span>T</span>
<?php else: ?> <span>U</span>
<?php endif; ?> </td>
<td class="text-center"> <?php if($ligne['contact_sg'] == 0): ?> <span>Vilar</span>
<?php else: ?> <span>Vicente</span>
<?php endif; ?> </td>
<td align="center"> <button type="button" class="btn btn-flat p-1 btn-default btn-sm dropdown-toggle dropdown-icon" data-toggle="modal" data-target="#myModalthree"> Action </button></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Data Table area End-->
</div>
</div>
<!-- Fin Tabs contenu 1-->
<!-- Tabs contenu 1-->
<div id="menu2" class="tab-pane fade in active">
<div class="tab-ctn">
<!-- Data Table area Start-->
<div class="data-table-area">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="data-table-list">
<div class="basic-tb-hd">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<h2>Contractualisation Client</h2>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
<div class="btn-list"> <button class="btn btn-primary notika-btn-primary btn-sm" data-toggle="modal" data-target="#myModalthree"> Nouvelle convention </button>
</div>
</div>
</div>
</div>

<div class="small text-muted mb-2">
<a class="btn btn-default" href="fc_conventions_borie.php"> Borie L.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'Austria');">Bordes M.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'Helen');">Cerez E.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Gauthier S.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Mallet M.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Mozzi M-P.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Oulhen G.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Porchas H.</a>
<a class="btn btn-default" href="#" onclick="$('table').tableFilter('filterRows', 'FooBar');">Punsola R.</a>
<a class="btn btn-danger" href="#" onclick="$('table').tableFilter('filterRows', '');">Tous</a>
</div>
<br>

<div class="table-responsive">
<table id="data-table-basic" class="table table-striped" data-order="[[ 4, &quot;desc&quot; ]]">
<thead>
<tr>
<th>Conv.</th>
<th>Statut</th>
<th>Début</th>
<th>Fin</th>
<th>Statut Admin.</th>
<th>Statut Financ.</th>
<th>AT</th>
<th>RD</th>
<th>SG</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($lignes as $ligne) { ?>
<tr>
<td><?php echo $ligne['num_conv']; ?></td>
<td class="text-center"> <?php if($ligne['status'] == 1): ?> <button class="btn btn-success notika-btn-success" disabled="disabled">En cours</button>
<?php elseif($ligne['status'] == 0): ?> <button class="btn btn-default notika-btn-default" disabled="disabled">Clôturé</button>
<?php else: ?> <button class="btn btn-warning notika-btn-warning" disabled="disabled">Non démarré</button>
<?php endif; ?> </td>
<td><?php echo date("d-m-Y",strtotime($ligne['date_debut'])); ?></td>
<td><?php echo date("d-m-Y",strtotime($ligne['date_fin'])); ?></td>
<td class="text-center"> <?php if($ligne['statut_admin'] == 1): ?> <button class="btn btn-success notika-btn-success" disabled="disabled">Complet</button>
<?php else: ?> <button class="btn btn-warning notika-btn-warning" disabled="disabled">Incomplet</button>
<?php endif; ?> </td>
<td class="text-center"> <?php if($ligne['statut_financ'] == 1): ?> <button class="btn btn-success notika-btn-success" disabled="disabled">Complet</button>
<?php else: ?> <button class="btn btn-warning notika-btn-warning" disabled="disabled">Incomplet</button>
<?php endif; ?> </td>
<td class="text-center"> <?php if($ligne['contact_at'] == 0): ?> <span>Borie</span>
<?php elseif($ligne['contact_at'] == 1): ?> <span>Bordes</span>
<?php elseif($ligne['contact_at'] == 2): ?> <span>Cerez</span>
<?php elseif($ligne['contact_at'] == 3): ?> <span>Gauthier</span>
<?php elseif($ligne['contact_at'] == 4): ?> <span>Mallet</span>
<?php elseif($ligne['contact_at'] == 5): ?> <span>Mozzi</span>
<?php elseif($ligne['contact_at'] == 6): ?> <span>Oulhen</span>
<?php elseif($ligne['contact_at'] == 7): ?> <span>Porchas</span>
<?php elseif($ligne['contact_at'] == 8): ?> <span>Punsola</span>
<?php else: ?> <span>Supiot</span>
<?php endif; ?> </td>
<td class="text-center"> <?php if($ligne['contact_rd'] == 0): ?> <span>Dalet</span>
<?php elseif($ligne['contact_rd'] == 1): ?> <span>B</span>
<?php elseif($ligne['contact_rd'] == 2): ?> <span>C</span>
<?php elseif($ligne['contact_rd'] == 3): ?> <span>D</span>
<?php elseif($ligne['contact_rd'] == 4): ?> <span>E</span>
<?php elseif($ligne['contact_rd'] == 5): ?> <span>F</span>
<?php elseif($ligne['contact_rd'] == 6): ?> <span>G</span>
<?php elseif($ligne['contact_rd'] == 7): ?> <span>H</span>
<?php elseif($ligne['contact_rd'] == 8): ?> <span>T</span>
<?php else: ?> <span>U</span>
<?php endif; ?> </td>
<td class="text-center"> <?php if($ligne['contact_sg'] == 0): ?> <span>Vilar</span>
<?php else: ?> <span>Vicente</span>
<?php endif; ?> </td>
<td align="center"> <button type="button" class="btn btn-flat p-1 btn-default btn-sm dropdown-toggle dropdown-icon" data-toggle="modal" data-target="#myModalthree"> Action </button></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Data Table area End-->
</div>
</div>
<!-- Fin Tabs contenu 1-->
</div>
</div>
</div>
</div>

Heureusement que c'est un extrait minimaliste
Tu peux utiliser la balise de code pour rendre ton extrait plus lisible.

Quelle version de Bootstrap tu utilises ?

On ne peut pas tester ton code PHP car on a pas accès à tes données (foreach $lignes...).
Pour commencer il faudrait mieux nous partager le code source html généré dans le navigateur (clic droit -> Code source de la page) avec ton code javascript.
Tu peux éventuellement utiliser un site comme pastebin.com ou cjoint.com pour partager le code si il est très long.

Désolé ... Lol.

le code est trop long et je ne peux pas partager à priori une url externe par le biais de ce forum.

Et dans mon code il y a aussi des url externe...

Comment puis-je trouver la version du boostrap ?

Merci en tous cas.

le code est trop long et je ne peux pas partager à priori une url externe par le biais de ce forum.

Effectivement pour éviter le spam, on bloque les liens postés par les nouveaux utilisateurs qui ont moins de 3 messages postés sur le forum.
Comme ceci était ton 4è message, normalement tu devrais pouvoir poster des liens sans problème !

Bonjour,

merci pour cette aide.

Ci-joint le lien : https://cjoint.com/c/LHDqKJ1LZi4

Pas d'inquiétude, sinon je procède autrement en mettant chaque tableau sur des pages différentes ... Cela ne me gêne pas

Je serai amené à solliciter à nouveau sur les Modals Bootstrap et l'affichage des données sur le Modal / l'envoi des données dans ma base de données.

Désolé mais je suis vraiment un débutant en php et plus largement en programmation.