DataTable inside custom popup modal

DataTable inside custom popup modal

Alejandro182Alejandro182 Posts: 1Questions: 1Answers: 0
edited July 2015 in Free community support

On my main page, I have a simple HTML table inside a custom popup modal that i've created. Once the DOM is ready, I initialize DataTable just fine, BUT, when i try to sort any columns or click a row it dont give any response, so i just can see the data fill in the table but no interaction.

this is my html:

<button id="trigger" class="button" type="button">Agregar Articulo</button>
<div style="display:none;">
        <table id ="tabla" class="display" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>ID</th>
            <th>Descripcion</th>
            <th>Precio</th>
        </tr>
        </thead>
        <tbody>
        </tbody>    
        </table>
</div>

and My javascript:

$(document).ready(function() { 
    // CONTENIDO PARA LA VENTANA POPUP
    var myContent = document.getElementById('content1');
    var myModal = new Modal({
        content: myContent,
        // max / min width of the modal window
            maxWidth: 1000,
            minWidth: 280,
            overlay: false
    });
    var triggerButton = document.getElementById('trigger');
    triggerButton.addEventListener('click', function() {
        myModal.open();
    });
    ///////////////////////////
    //llenado de la tabla articulos
    $.ajax({
    url: "<?= Router::Url(['controller' => 'cab_facturas', 'action' => 'getDataArticulos'], TRUE); ?>/",//teacher//getdata/3
    dataType: 'json',
    success: function(data){

        var table =$('#tabla').DataTable( {
            bFilter: false,
            data: data,
               "columns": [
                    { "data": "Articulo.id" },
                    { "data": "Articulo.descripcion" },
                    { "data": "Articulo.precio" }
                ]
        });     
    }//success
    }); 
    /////////////////////////////
    $('#tabla tbody').on( 'click', 'tr', function () {
        var name = $('td', this).eq(0).text();
        alert( 'You clicked on '+name+'\'s row' );
    });
}); 

I test the table without the popup and everythings going fine, the issue is when is loaded on my custom popup, please give me some advices to solve my problem.

This discussion has been closed.