具有动态 ID 的数据表

Question

我正在使用带有 HTML、php 和 MySQL 的 jQuery 的数据表插件。当我明确设置表的 id 时一切正常，但如果我循环 MySQL 结果 jquery 不会“理解”表 id。也许用代码更清楚。

DataTable 工作正常：

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

数据表不工作：

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

奇怪的是，在渲染的源代码中，table id 显示为“datatable-tabletools-1”、“datatable-tabletools-2”等等......

提前致谢！

Answer 1

我认为您当前的代码没有任何问题。 您可以尝试使用类选择器应用数据表。 $('.table').DataTable({ });