Antes que nada buen día a todos.
He buscado mucho por internet y no he encontrado la solución a mi problema.
Paso a comentar.
Estoy trabajando con AJAX, PHP y Datatables.
Me funciona bien el pluing. Y he logrado mostrar los registros en mi Datatable.
Lo que quiero hacer que no me funciona es que al pasar el mouse por arriba de cada fila, se "ilumine" y al quitar el mouse vuelva a su estado normal.
Hasta donde he logrado averiguar, lo que me está pasando es que el evento, no me detecta la fila <TR>. Es decir, el código que uso es el siguiente...
$("#tabla tbody tr").each(function(){
$(this).mouseover(function(){
$(this).addClass("ui-state-hover");
}).mouseout(function(){
$(this).removeClass("ui-state-hover");
});
});
El código de la tabla es el siguiente:
<table id="tabla">
<thead>
<tr>
<th>Id</th>
<th>Titulo</th>
<th>Subtitulo</th>
<th>Fecha</th>
<th>Acceder</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Si le agrego a la página manualmente una fila, SI ME FUNCIONA EL mouseover
Ejemplo:
<table id="tabla">
<thead>
<tr>
<th>Id</th>
<th>Titulo</th>
<th>Subtitulo</th>
<th>Fecha</th>
<th>Acceder</th>
</tr>
</thead>
<tbody>
<tr >
<td>4</td>
<td>Titulo</td>
<td>Subtitulo</td>
<td>2013-09-11 00:00:00</td>
<td>4</td>
</tr>
</tbody>
</table>
EL PROBLEMA es que NO ME FUNCIONA cuando las filas son insertadas a través de la función AJAX.
Dejo el código por si lo quieren ver.
$.ajax({
url:'./listahistorias_proceso.php',
type:'post',
data:{ tag: 'getData'},
dataType: 'json',
success: function(data){
if(data.success){
$.each(data, function(index,record){
if($.isNumeric(index)){
var row = $("<tr />");
$("<td />").text(record.idhistoria).appendTo(row);
$("<td />").text(record.titulo).appendTo(row);
$("<td />").text(record.subtitulo).appendTo(row);
$("<td />").text(record.fecha).appendTo(row);
$("<td />").text(record.acceder).appendTo(row);
$("<tr>");
row.appendTo('table tbody');
}
})
}
oTable = $('table').dataTable({
"bjQueryUI": true,
"sPaginationType": "full_numbers",
"oLanguage": {
"sLengthMenu": "Mostrar _MENU_ filas por pagina",
"sZeroRecords": "Datos no encontrados",
"sInfo": "Mostrando _START_ a _END_ de _TOTAL_ filas",
"sInfoEmpty": "Sin entradas para mostrar",
"sInfoFiltered": "",
"sSearch": "Buscar",
"sProcessing": "Buscando...",
"sLoadingRecords": "Por favor espere - Cargando...",
"sEmptyTable": "No se obtuvieron datos",
"oPaginate": {
"sFirst": "Primera",
"sPrevious": "Anterior",
"sNext": "Siguiente",
"sLast": "Ultima"
}
},
"aoColumns":[
{'sname':'id', 'sType':'numeric', 'bVisible':true},
{'sName':'Titulo', 'sType':'string','bVisible':true},
{'sName':'Subtitulo', 'sType':'string','bVisible':true},
{'sName':'Fecha', 'sType':'date','bVisible':true},
{'sName':'Acceder', 'sType':'numeric','bVisible':true}
],
"oTableTools": {
"sRowSelect": "single",
"fnRowSelected": function( node ) {
alert("Clicked");
}
}
})
},
error: function(jqXHR, textStatus, errorThrown){
alert("error ==>" + jqXHR.responseText);
alert("error ==>" + jqXHR.textStatus);
alert("excepcion ==>" + errorThrown);
}
}); //ajax
Nota:
He probado con otros eventos como .live(), .on(), .click() y no me funcionan.
Repito creo que el problema esta en que no me detecta las filas que se insertan por ajax.
Desde ya muchas gracias. Espero haber sido claro y no complicado.
Aguardo sus comentarios.
Gracias de nuevo.
Saludos.