Estoy usando el plugin DataTables de jQuery
con HTML
, php
y MySQL
. Si construyo una tabla y utilizo el plugin funciona todo correcto, el problema aparece cuando quiero crear múltiples tablas y que éstas sean DataTables. Quizá con el código quede más claro. Lo dejo abajo.
DataTable funcionando:
<table class="table table-bordered table-striped mb-none" id="datatable-tabletools">
<thead>
<tr>
<th style="width: 60px; text-align: center;">Id</th>
<th style="width: 400px; text-align: center;">Info A</th>
<th style="width: 390px; text-align: center;">Info B</th>
<th style="width: 100px; text-align: center;">Actions</th>
</tr>
</thead>
<tbody>
<!-- tbody dynamically populated -->
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$('#datatable-tabletools').DataTable({
});
});
</script>
DataTable no funcionando:
<?php
foreach ($sections as $section)
{
$insc = Inscripciones::getAllInscriptionBySection($section -> getId());
if (count($insc) > 0)
{
?>
<h2 style="margin-bottom: 50px;"><?php echo $section->getNombre(); ?></h2>
<table class="table table-bordered table-striped mb-none" id="datatable-tabletools-<?php echo $section -> getId(); ?>">
<thead>
<tr>
<th style="width: 60px; text-align: center;">Id</th>
<th style="width: 450px; text-align: center;">Category</th>
<th style="width: 390px; text-align: center;">Title</th>
<th style="width: 140; text-align: center;">Usuario</th>
<th style="width: 100px; text-align: center;">Acciones</th>
</tr>
</thead>
<tbody>
<!-- tbody also dynamically populated -->
</tbody>
</table>
<?php
}
}
?>
<script type="text/javascript">
$(document).ready(function () {
$('#datatable-tabletools-1').DataTable({
});
$('#datatable-tabletools-2').DataTable({
})
$('#datatable-tabletools-3').DataTable({
})
});
</script>
Lo más curioso es que en el código fuente renderizado aparecen los id's como "datatable-tabletools-1", "datatable-tabletools-2" etc Gracias de antemano!