Me surge un problema al momento de usar jquery Datatables, no se por que no me permite abrir modal dialogs que son llamados después de la fila 10, todo funciona normal en las filas 1 - 10 de la tabla, sin embargo no se que sucede que todas las demás fallan, ya que en consola y en network de chrome no me muestra ningún error, incluso se ejecutan bien las llamadas ajax que tengo, el problema es que los modal dialogs no se abren, el código que tengo es el siguiente:
Llamada Datatables:
$(document).ready(function() {
$('#datatab').DataTable()
}
Creación tabla html:
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
Aqui pongo el problema en jsfiddle https://jsfiddle.net/s5w74xe7/1/