Question:
I have a problem when using jquery Datatables , I don't know why it doesn't allow me to open modal dialogs that are called after row 10, everything works normally in rows 1 – 10 of the table, however I don't know what happens all the others fail, since in chrome console and network it does not show me any error, even the ajax calls that I have are executed well, the problem is that the modal dialogs do not open, the code that I have is the following:
Data table call:
$(document).ready(function() {
$('#datatab').DataTable()
}
Create html table:
public function tablaDet($arreglo, $tipo, $tipoeq){
$r = json_decode(json_encode($arreglo),TRUE);
$th = array_keys($r[0]);
/*echo "<pre>";
print_r($r);*/
switch ($tipo) {
case 'lista':
$t = "<table id='datatab' class='display'>";
$t .= "<thead>";
$t .= "<tr>";
foreach ($th as $heads => $head) {
if ($head != "identificador") {
switch ($head) {
case 'nombre_depto':
$head = "Departamento";
break;
case 'nombre_persona':
$head = "Funcionario Actual";
break;
case 'dir_ip':
$head = "Dirección Ip";
break;
case 'mac':
$head = "Dirección Física";
break;
case 'nro_serie':
$head = "Nro. Serie";
break;
case 'codigo_ebye':
$head = "Código EBYE";
break;
case 'codigo_activo':
$head = "Código Activo";
break;
case 'documentos':
$head = "Documentos";
break;
case 'fecha_ingreso':
$head = "Fecha Ingreso";
break;
case 'nombre_prod':
$head = "Nombre Producto";
break;
case 'nombre_marca':
$head = "Marca";
break;
case 'avaluo_inicial':
$head = "Avaluo Inicial";
break;
case 'descr_procesador':
$head = "Procesador";
break;
case 'nombre_modelo':
$head = "Modelo";
break;
case 'nombre_cpu':
$head = "CPU";
break;
case 'nombre_mon':
$head = "Monitor";
break;
default:
# code...
break;
}
$t .= "<th>".$head."</th>";
}
}
$t .= "<th>Detalles</th>";
$t .= "<th>Actualizar</th>";
$t .= "<th>Eliminar</th>";
$t .= "</tr>";
$t .= "</thead>";
$t .= "<tbody>";
foreach ($r as $files) {
$t .= "<tr>";
foreach ($files as $cols => $col) {
if ($cols != "identificador") {
$t .= "<td>";
$t .= $col;
$t .= "</td>";
}
}
$t.='<td><a href="#" class="view_'.strtolower($tipoeq).'" id="view_'.strtolower($tipoeq).''.$files['identificador'].'" onClick="obtener'.$tipoeq.'Det('.$files['identificador'].')"><i class="ui-icon ui-icon-circle-zoomout" style="color:black;"></i></button></td>';
$t.='<td><a href="#" class="act_'.strtolower($tipoeq).'" id="act_'.strtolower($tipoeq).''.$files['identificador'].'" onClick="obtenerCpu('.$files['identificador'].')"><i class="ui-icon ui-icon-refresh" style="color:black;"></i></button></td>';
$t.='<td><a href="#" onClick="eliminar'.$tipoeq.'('.$files['identificador'].')"><i class="ui-icon ui-icon-trash" style="color:black;"></i></a></td>';
$t .= "</tr>";
}
$t .= "</tbody>";
$t .= "</table>";
break;
default:
# code...
break;
}
return $t;
}
Abrir modal Dialog:
$(function() {
var dialog, form;
dialog = $( "#details-cpu" ).dialog({
autoOpen: false,
height: 500,
width: "80%",
modal: true,
buttons: {
Cerrar: function() {
dialog.dialog( "close" );
}
},
close: function() {
//form[ 0 ].reset();
}
});
form = dialog.find( "form" ).on( "submit", function( event ) {
event.preventDefault();
//actUser();
});
$('.view_cpu').click(function(e) {
e.preventDefault();
dialog.dialog('open');
});
/*$( "#act_user" ).button().on( "click", function() {
dialog.dialog( "open" );
});*/
});
EDIT
Here I put the problem in jsfiddle https://jsfiddle.net/s5w74xe7/1/
Answer:
@Alvaro Montoro's solution is very correct. Another solution I've come up with is to listen to the table's draw event and re-instantiate the event handler. My fiddle here . (It's a bit "sloppy" but hey it works!!)