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;
}
Open 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/
@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!!)
The bug is as follows: you associate the event handler
clickwhen the page is created:But when the page is created there are only a certain number of elements in the table (10 specifically), so when you paginate or change the number of elements per page, those new elements don't have any event handlers associated with them.
To solve, use delegate events with
.on()and it will work for you. You would just have to change the code above to this:You can see it in this JSFiddle: https://jsfiddle.net/s5w74xe7/2/
I did it with buttons, look at this https://jsfiddle.net/lburgos/8zajd3fe/5/
Your example Álvaro Montoro helped me a lot , thanks for that, I was able to adapt it to buttons, thank you very much, God bless you.