DataTables mit dynamischer ID

Question

Ich verwende Datentabelle-Plugin für jQuery mit HTML, PHP und MySQL. Alles ist in Ordnung, wenn ich die ID der Tabelle explizit festlege, aber wenn ich über ein MySQL-Ergebnis zurückschlinge, "versteht" jquery die Tabellen-ID nicht. Vielleicht ist es mit dem Code klarer.

Table adaequat:

<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 nicht funktioniert:

<?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> 

Das Merkwürdige ist in der gerenderten Quellcode wird die Tabelle-ID als "Datatable-tabletools-1" gezeigt, dass, "datatable-tabletools-2", und so weiter ...

Vielen Dank im Voraus!

Answer 1

Ich sehe kein Problem mit Ihrem aktuellen Code. Sie können versuchen, Datentabelle mit einem Klassenselektor anzuwenden. $ ('. Tabelle'). DataTable ({});