0

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!

9
  • 1
    ¿Qué error recibes?¿Cómo no funciona?
    – Alvaro Montoro
    Commented el 3 mar. 2017 a las 16:41
  • Hola. Necesitas implementar configuraciones diferentes para cada tabla? Si no lo necesitas puedes ponerles a todas la misma clase y referenciarlas con $('.claseComun').DataTable({}); y se aplicará para todas. Commented el 3 mar. 2017 a las 16:45
  • Hola y gracias por la respuesta! No recibo ningún error, tan sólo printa las tablas como tablas estándar Commented el 3 mar. 2017 a las 16:45
  • Hola! ya he provado también con clases pero sin suerte... Commented el 3 mar. 2017 a las 16:46
  • Yo lo acabo de probar localmente y funcionó perfectamente. Si no tienes configuraciones diferentes para cada tabla referencíalas con una clase en común. Dime ¿Necesitas configuraciones distintas para cada tabla? Commented el 3 mar. 2017 a las 16:47

1 respuesta 1

0

Puedes referenciarlas por una clase en común si no necesitas configuraciones dataTable() diferentes para cada tabla.

<script type="text/javascript">
          $(document).ready(function () {
           $('.table').DataTable({ });

          });
   </script>

Eso debería funcionar perfectamente, dime ¿No lo hace?

4
  • Lo he provado y no funciona Commented el 3 mar. 2017 a las 16:59
  • @Icar Gongora, podrías intentar así, por favor: window.onload = function() { $('.hola').DataTable({}); }; Commented el 3 mar. 2017 a las 17:15
  • he provado con clases en un script nuevo y ha funcionado por lo que entiendo que tengo que estar fallando por algún otro lado, te valido la respuesta puesto que en un script limpio (sólo con la tabla) ha funcionado Commented el 3 mar. 2017 a las 17:19
  • 1
    No me interesa que valides mi respuesta con algo que no te sirvió. Es interesante tu caso y quiero saber por qué no lo toma con tu código. No es por ti, es por mí ahora jhahaha. Dime, intentaste con window.onload? Commented el 3 mar. 2017 a las 17:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.