2

Tengo una página html que me genera de forma dinámica con FreemarkerTemplate las pestañas y su contenido de la siguiente forma:

<div class="col-lg-12 col-xs-12" id="tabsDiv">
<ul class="nav nav-tabs" id="indexTabs">
    <#list plantas as planta>
        <li><a href="#${planta.idPlanta}" data-toggle="tab">${planta.planta}</a></li>
    </#list>
</ul>
<div class="tab-content" id="tabs">
    <br>
    <#list plantas as planta>
        <div class="tab-pane fade" id="${planta.idPlanta}">
            <table class="table table-hover table-bordered" id="tabla${planta.idPlanta}">
                <thead>
                    <tr>
                        <th align="center">Máquina</th>
                        <th align="center">Estado</th>
                        <th align="center">Piezas Producidas</th>
                        <th align="center">Piezas Retenidas</th>
                        <th align="center">Referencias</th>
                    </tr>
                </thead>
                <tfoot class="filters">
                    <tr>
                        <td align="center">Máquina</td>
                        <td align="center">Estado</td>
                        <td align="center">Piezas Producidas</td>
                        <td align="center">Piezas Retenidas</td>
                        <td align="center">Referencias</td>
                    </tr>
                </tfoot>
                <tbody>
                    <#list maquinas as fila>
                        <#if fila.idPlanta == planta.idPlanta>
                            <tr> 
                                <td> ${fila.maquina} </td>
                                <td align="center"> ${fila.estado} </td>
                                <td align="center"> ${fila.totalPiezas} </td>
                                <td align="center"> ${fila.retenidas} </td>
                                <td align="center">
                                    <button class="btn btn-primary btn-sm" type="button" onclick="location.href='/listReferencias/${fila.idMaquina}'">
                                        <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                                    </button>
                                </td>
                            </tr>
                        </#if>
                    </#list>
                </tbody>
            </table>
        </div>
   </#list>
</div>

Luego al final de la página tengo los siguientes scripts:

<script type="text/javascript">
$.fn.dataTable.ext.order['dom-select'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('select', td).val();
    } );
}

$(document).ready(function() {
    //Añadimos los filtros al pie de cada columna **//Aquí es donde tengo el problema ya que el id no es #tabla si no #tabla + id_pestaña**
    $('#tabla tfoot td').not(":eq(3),:eq(4),:eq(5)").each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="'+title+'" id="'+title+'" />' );
    } );

    //Asignamos carateristicas a la tabla **//Aquí es donde tengo el problema ya que el id no es #tabla si no #tabla + id_pestaña**
    $('#tabla').DataTable({
        "stateSave": true,
        "stateSaveCallback": function (settings, data) {
            // save the filter settings without connecting it to a unique url
            localStorage.setItem("dataTables_filterSettings", JSON.stringify(data));
        },
        "stateLoadCallback": function (settings) {
            // read out the filter settings and apply
            return JSON.parse(localStorage.getItem("dataTables_filterSettings"));
        }
    });

    var table = $('#tabla').DataTable(); **//Aquí es donde tengo el problema ya que el id no es #tabla si no #tabla + id_pestaña**
    //Aplicamos los filtros si hemos realizado alguna búsqueda
    table.columns().eq( 0 ).each( function ( colIdx ) {
        if (colIdx == 3 || colIdx == 4 || colIdx == 5) return;
        table.column(colIdx).footer().children[0].value=JSON.parse(localStorage.getItem("dataTables_filterSettings")).columns[colIdx].search.search;
        $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );
    } );
} );

Los scripts funcionan bien si solo existe una tabla en la página, pero en este caso el id es dinámico y no se como adaptar el script que tengo al id dinámico que tengo para identificar las tablas y poder aplicar el código.

1
  • podria ser tan sencillo como declarar una clase especifica para esas tablas y asi cambiar de $('#tabla') a $('.clase-tablas'), aunque hay otras formas tambien el 11 oct. 2016 a las 15:52

2 respuestas 2

2

Debería ser como menciona @Forcefield de que en vez de utilizar el ID como selector utilices una clase tal como

<div class="tab-pane fade miclasecss" id="${planta.idPlanta}">
<table class="table table-hover table-bordered" id="tabla${planta.idPlanta}">                <thead></thead>
...
</table>

y en tu script

var table = $('.miclasecss').DataTable(); 

Adicionalmente a esto, veo que llamas dos veces al plugin cuando ya lo tienes instanciado en la variable "table" pudiendo volverlo a utilizar directamente desde la variable "table" (solo una opinión)

2
  • No obtengo lo que necesito ya que cuando hace la parte de
    – Jota
    el 13 oct. 2016 a las 7:56
  • var table = $('.claseTablas').DataTable(); //Aplicamos los filtros si hemos realizado alguna búsqueda table.columns().eq( 0 ).each( function ( colIdx ) { // El each da fallo poerque es null. Es decir no instancia bien la tabla } ); } );
    – Jota
    el 13 oct. 2016 a las 8:03
0

Bueno la respuesta que me habeis ofrecido es correcta pero la forma de acceder a la tabla no es como comentais ya que la clase se la estabamos asignando a la pestaña.

He conseguido llegar a ellos con var tabla = $('.claseTab').eq(0).children(0).DataTable();

Y a partir de aquí ya trabajar con la tabla.

Muchas gracias a los dos.

1
  • si esto responde a tu propia pregunta, la puedes marcar como correcta y así le va a servir a otro usuario que tenga tu mismo problema en el futuro. Saludos y que bueno que lo has resuelto.
    – Alan
    el 18 oct. 2016 a las 20:21

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.