DataTable inside custom popup modal
DataTable inside custom popup modal
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.