ABM, búsqueda, ordenamiento por columnas y Selección de una tabla, edición y carga directo
sobre celdas o por seudomodal (POR AJAX Y RECARGA)
****************JQUERY******************************************************************************************
<script>
$(document).ready(function(){
//centrador
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
//fin centrador
//************************EDICIÓN CLIC SOBRE LA CELDA**************************************************************
var id=0; //declaro acá para que sean globales
var contenido; //guarda el contenido de un campo por si no se cambia
var temp; //guarda toda la div para reponerla si no se cambia
var campo; //guarda el nombre del campo que vamos a editar
var nuevovalor; //guarda el valor del input si editamos o no.
var editando=0; //flag para saber en el click si salimos de editar
$('body').on('dblclick','.entrada', function(e){//1-usamos esta y no la de abajo porque si no en la segunda
// $('.entrada').on('dblclick', function(e){ dblclick no va a responder porque .entrada no se cargo en el DOM inicial
id= $(this).parents('tr').attr('id'); //2-obtiene el id del <tr> o sea de la fila del clicado
contenido= $(this).html(); //3-obtiene el contenido de la <div> clicada
temp = $(this).parent().html(); //4-guarda el html completo de la celda por si no hay cambios
campo = $(this).parent().attr('class'); //5-obtiene la clase = nombre del campo que contiene el <td class=>
if(contenido==" "){ // si el contenido es   deja el input limpio si no pone su valor
var entrada = "<input class='cambio' type='text' value='' />"; // porque si no la database lo pasa a unicode
}else{ // y luego falla la igualdad de 8
var entrada = "<input class='cambio' type='text' value='" + contenido + "' />";
}
$(this).parent().html(entrada); //6-convierto la div en input con contenido igual al valor de la <div> clicada
$('.cambio').focus(); //7-le da foco al input.
editando=1; //8-levanto la flag para indicar que estoy en modo edición.
});
$('body').on('keyup','.cambio', function(e){ //8-igual que dblclick pero al oprimir una tecla
if (e.keyCode == 27 ) { //9-si la tecla es ESC (keycode=27)
$('#'+id).find('.' + campo).html(temp); //10-vuelve al contenido original.
editando=0; //11-indico que terminó la edición
}else if (e.keyCode == 13 ) { //12-si la tecla es INTRO (keycode=13)
nuevovalor = $(this).val(); //13-guardo el valor actual del input
if (nuevovalor==contenido){ //14 si no cambie el valor
$('#'+id).find('.' + campo).html(temp); //15-vuelve al contenido original.
}else{
ejecutar(nuevovalor); //16-si cambió va al AJAX para cambiar la base de datos
}
editando=0; //17-en ambos casos indico fin de edición
}
});
$('body').on('blur','.cambio', function(e){ //18-igual que dblclick pero al perder foco el input
nuevovalor = $(this).val(); //19-guardo el valor actual del input (para el click)
});
$('body').on('click', function(e){ //20-igual que dblclick pero al click
var quien= e.target.nodeName; //21-detecto en que htlm cliqué
if (quien != 'INPUT' && editando==1 ){ //22-si cliqué fuera del input y estoy editando
if (nuevovalor==contenido || nuevovalor==''){ //23- si no cambie el valor
$('#'+id).find('.' + campo).html(temp); //24-vuelve al contenido original si no se cambió nada (en campo=)
}else{
ejecutar(nuevovalor); //25-si cambió va al AJAX para cambiar la base de datos
}
editando=0;
}
});
var ejecutar = function(nuevo){ //Función de EDICIÓN
$("#sombra").css("height", $(document).height()); // 26-sombra con alto de viewport
$("#sombra").css("width", $(document).width()); // 27-sombra con ancho de viewport
$("#sombra").css("visibility","visible"); // 28-sombra visible
$("#esperando").center(); // 29-centro esperando
$("#esperando").css("visibility","visible"); // 30-esperando visible
$.ajax({
type: "POST",
url: "tec-php-abm-tabla-procesar01.php?accion=ECE", //E-ditar CE-lda
data: 'valor=' + nuevo + '&id=' + id + '&campo=' + campo, //31-POSTeo los pares valor/id/campo
dataType:'json',
success: function(data) { //32-sustituyo el input por una div con el valor que devuelve procesar
$('#'+id).find('.' + campo).html("<div class='entrada'>" + data.newvalor + "</div>");
var genero = $('#'+id).find('.genero').children().html(); //33-recupero el género actual para la W
var especie = $('#'+id).find('.especie').children().html(); //34-recupero la especie actual para la W
var linkwiki= "https://es.wikipedia.org/wiki/" + genero + "_" + especie; //35-por si editamos el genero y/o especie
$('#'+id).find('.wiki').children().attr('href',linkwiki); //36-apuntamos el link a la wiki
$("#sombra").css("visibility","hidden"); // 37-sombra invisible
$("#esperando").css("visibility","hidden"); // 38-esperando invisible
},
error: function(request,error) {
$("#msg").html("ha ocurrido un error al editar la dirección");
$('#'+id).find('.' + campo).html(temp); //39-si no se pudo editar repongo div con el valor antiguo
}
}); //fin ajax
};
/****************************************************OPERACIONES SOBRE FILA**************************************************** */
//************************CAMBIO COLOR DE FILA SEGÚN ÍCONO**************************************************************
$('body').on('mouseover','.ficha', function(e){ // 40-si estoy sobre ficha
$(this).parents('tr').css('background-color','#a4cce9'); // 41- color de fondo del ícono a toda la fila (tr)
$(this).parents('tr').css('color','black'); // 42- letras negras
}); // fin mouseover
$('body').on('mouseover','.edicion', function(e){ // idem
$(this).parents('tr').css('background-color','#bbbbbb');
$(this).parents('tr').css('color','black');
}); // fin mouseover
$('body').on('mouseover','.borrar', function(e){ // idem
$(this).parents('tr').css('background-color','#ee939c');
$(this).parents('tr').css('color','black');
}); // fin mouseover
$('body').on('mouseout','.ficha,.edicion,.borrar', function(e){ //43- al salir de cualquiera de los tres
$(this).parents('tr').css('background-color','white'); //44-repongo fondo
$(this).parents('tr').css('color','#555555'); // 45-repongo color de letras
}); // fin mouseout
var tipoajax; //46-global para verlas en las distintas funciones.
/************************NUEVO REGISTRO **************************************************************/
// El form es común a editar
$('#nuevo').on('click', function(e){
tipoajax='nuevo'; //47-para que GUARDAR sepa a donde mandar del script
$("#idbloque").css('display','none'); //48- no necesito id, lo oculto
$("#fichar").css('display','none'); //49-no lo necesito botón para ficha, lo oculto
$("#idcaja").val(''); //50-pongo en blanco todos los campos
$("#familia").val('');
$("#genero").val('');
$("#especie").val('');
$("#nombre1").val('');
$("#nombre2").val('');
$("#lugar").val('');
$("#habitat").val('');
$("#ciclo").val('');
$("#observaciones").val('');
$("#wikilink").css('visibility','hidden'); //51-lo invisibilizo hasta que se complete especie y género
$("#sombra").css("height", $(document).height()); // 52-sombra con alto de viewport
$("#sombra").css("width", $(document).width()); // 53-sombra con ancho de viewport
$("#sombra").css("visibility","visible"); // 54-sombra visible
$("#caja").center(); // 55- centro el form
$("#caja").css("display","block"); // 56-muestro el form
});
// para que se active W solo si hay texto en género y especie
$('body').on('blur','#especie,#genero', function(e){ //57-para activar W una vez cargado género y especie
nuevoespecie = $('#especie').val(); //58-guardo el valor del input especie
nuevogenero = $('#genero').val(); //59-guardo el valor del input especie
if(nuevoespecie.length!=0 && nuevogenero.length!=0){ //60-si está genero y especie
var linkwiki= "https://es.wikipedia.org/wiki/" + nuevogenero + "_" + nuevoespecie;
$("#wikilink").attr('href',linkwiki); //61-apuntamos el link a la wiki
$("#wikilink").css('visibility','visible'); //62-visibilizamos el link
}else{
$("#wikilink").css('visibility','hidden'); //63-si no tiene genero y especie lo invisibilizamos
}
});
$('#cancelar').on('click', function(e){ // 64- si cancelo nuevo o editar
$("#caja").css("display","none"); // 65- oculto el form
$("#sombra").css("visibility","hidden"); // 66- oculto la sombra
});
$('#guardar').on('click', function(e){
var idcaja = $("#idcaja").val(); // 67- recupero los valores ingresados en el form
var familia = $("#familia").val(); // idem....
var genero = $("#genero").val();
var especie = $("#especie").val();
var nombre1 = $("#nombre1").val();
var nombre2 = $("#nombre2").val();
var lugar = $("#lugar").val();
var habitat = $("#habitat").val();
var ciclo = $("#ciclo").val();
var observaciones = $("#observaciones").val();
if(tipoajax=='nuevo'){ //67 bis indico a guardar que es un registro nuevo (puse tipoajax en botón
// guardar)
$.ajax({
type: "POST",
url:"tec-php-abm-tabla-procesar01.php?accion=NRE", //N-uevo RE-gistro
data: 'tipoajax' + tipoajax + '&familia=' + familia + '&genero=' + genero + '&especie=' + especie + '&nombre1=' + nombre1 + '&nombre2=' + nombre2 + '&lugar=' + lugar + '&habitat=' + habitat + '&ciclo=' + ciclo + '&observaciones=' + observaciones, //28-POSTeo los pares valor/id/campo
dataType:'json',
success: function(data) {
if(data.id=='nulo'){ // 68- el script devuelve nulo si ya cargamos el Genero especie
$("#msg_caja").html("La especie ya está en la base de datos");
}else{
var wiki = "https://es.wikipedia.org/wiki/"+ data.genero + "_" + data.especie;
var salida = "<tr tabindex='0' id='" + data.id + "'>"; // 69- armamos la fila nueva a insertar
salida += "<td class='filaid'>" + data.id + "<span class='ciclo' style='display:none'>" + data.ciclo + "</span></td>";
salida += "<td class='wiki'><a class='wlink' href='"+ wiki + "' target='_blank'><i class='fa fa-wikipedia-w' aria-hidden='true'></i></a></td>";
salida += "<td class='familia'> <div class='entrada'>" + data.familia + "</div></td>";
salida += "<td class='genero'> <div class='entrada'>" + data.genero + "</div></td>";
salida += "<td class='especie'> <div class='entrada'>" + data.especie + "</div></td>";
salida += "<td class='nombre1'> <div class='entrada'>" + data.nombre1 + "</div></td>";
salida += "<td class='nombre2'> <div class='entrada'>" + data.nombre2 + "</div></td>";
salida += "<td class='lugar'> <div class='entrada'>" + data.lugar + "</div></td>";
salida += "<td class='habitat'> <div class='entrada'>" + data.habitat + "</div></td>";
salida += "<td class='observaciones'> <div class='entrada'>" + data.observaciones + "</div></td>";
salida += "<td class='ficha' ><a href='javascript:void(0)'><i class='fa fa-eye' aria-hidden='true' style='color:darkcyan;'></i></a></td>"
salida += "<td class='edicion'><a href='javascript:void(0)'><i class='fa fa-pencil' aria-hidden='true'></i></a></td>";
salida += "<td class='borrar'><a href='javascript:void(0)'><i class='fa fa-minus-circle fa-lg' aria-hidden='true' style='color:red;'></i></a></td>";
salida += "</tr>";
$("#tabla").append(salida); // 70- agregamos el <tr> generado al final de la tabla
$('#'+ data.id).focus(); // 71- le damos foco para que se vea
$("#caja").css("display","none"); // 72- oculto form
$("#sombra").css("visibility","hidden"); // 73- oculto sombra
}
},
error: function(request,error) {
$("#msg").html("ha ocurrido un error al cargar el nuevo registro");
$("#caja").css("display","none"); // idem si hay error
$("#sombra").css("visibility","hidden"); // idem si hay error
}
}); //fin ajax
}else{ // 74- si no es guardar tipoajax es editar
$.ajax({
type: "POST",
url: "tec-php-abm-tabla-procesar01.php?accion=ERE", //E-ditar RE-gistro +
data: 'idcaja=' + idcaja + '&familia=' + familia + '&genero=' + genero + '&especie=' + especie + '&nombre1=' + nombre1 + '&nombre2=' + nombre2 + '&lugar=' + lugar + '&habitat=' + habitat + '&ciclo=' + ciclo + '&observaciones=' + observaciones, //28-POSTeo los pares valor/id/campo
dataType:'json',
success: function(data) {
if(data.id=='nulo'){ // 75- si el script devuelve nulo es que no pudo hacer el UPDATE
$("#msg_caja").html("El registro no pudo editarse");
}else{ // 76- si no, cambiamos el contenido de las div por el retorno de AJAX
$('#'+idcaja).find('.familia').children().html(data.familia); //77- ('#'+idcaja) es el <tr> porque
$('#'+idcaja).find('.genero').children().html(data.genero); // idcaja es el id del form que
$('#'+idcaja).find('.especie').children().html(data.especie); // pasamos de la fila donde clicamos
$('#'+idcaja).find('.nombre1').children().html(data.nombre1); // editar, ('.campo') es el <td> y
$('#'+idcaja).find('.nombre2').children().html(data.nombre2); //.children la <div> dentro del <td>
$('#'+idcaja).find('.lugar').children().html(data.lugar); // donde va el texto data.campo
$('#'+idcaja).find('.habitat').children().html(data.habitat);
$('#'+idcaja).find('.ciclo').html(data.ciclo);
$('#'+idcaja).find('.observaciones').children().html(data.observaciones);
$('#'+ idcaja).focus(); // 78- foco a la fila editada
$("#caja").css("display","none"); // 79- oculto form
$("#sombra").css("visibility","hidden"); // 80- oculto sombra
}
},
error: function(request,error) {
$("#msg").html("ha ocurrido un error al editar el registro N°: " + id);
$("#caja").css("display","none"); // 81- oculto form
$("#sombra").css("visibility","hidden"); // 82- oculto sombra
}
}); //fin ajax
} // fin del else
});
/************************BORRAR REGISTRO **************************************************************/
$('body').on('click','.borrar', function(e){
id= $(this).parents('tr').attr('id'); // 83-obtiene el id del <tr> o sea de la fila del clicado para borrar
var genero = $('#'+id).find('.genero').children().html(); //84- obtengo género como en 77
var especie= $('#'+id).find('.especie').children().html(); //85- idem especie
var condicion = "Está seguro de borrar: \n "+ genero + " " + especie + "\n ¡ESTA OPERACIÓN NO PUEDE DESHACERSE!";
if (confirm(condicion)){ //86- si confirmo
$.ajax({
type: "POST",
url: "tec-php-abm-tabla-procesar01.php?accion=BRE", //B-orrar RE-gistro
data: 'id=' + id, //87-POSTeo el par id/valor
dataType:'json',
success: function(data) {
if(data.id=='nulo'){ //88- si el script devuelve nulo es error de borrado
$("#msg_caja").html("El registro no pudo borrarse");
}else{
$('#'+ data.id).remove(); //89 si fue exitoso remuevo el <tr>
$("#msg").html("El registro de id N°: " + id + " ha sido eliminado definitivamente");
}
},
error: function(request,error) {
$("#msg").html("ha ocurrido un error al borrar el registro N°: " + id);
}
}); //fin ajax
} //fin if confirm
}); //fin borrar
/************************EDITAR REGISTRO **************************************************************/
$('body').on('click','.edicion', function(e){
tipoajax='edicion'; //90-para que GUARDAR sepa a donde mandar del script
id= $(this).parents('tr').attr('id'); // 91-obtiene el id del <tr> o sea de la fila del clicado
var familia = $('#'+id).find('.familia').children().html(); // 92-obtengo los valores de los campos de la fila
var genero = $('#'+id).find('.genero').children().html(); // .familia es el <td> children, el <div> (como 77)
var especie = $('#'+id).find('.especie').children().html(); //idem....
var nombre1 = $('#'+id).find('.nombre1').children().html();
var nombre2 = $('#'+id).find('.nombre2').children().html();
var lugar = $('#'+id).find('.lugar').children().html();
var habitat = $('#'+id).find('.habitat').children().html();
var ciclo = $('#'+id).find('.ciclo').html();
var observaciones = $('#'+id).find('.observaciones').children().html();
if(familia==" "){ //93-borramos los que se pusieron para la edición por celda
familia=""; // solo en caso de que estén aparentemente en blanco.
}
if(genero==" "){
genero="";
}
if(especie==" "){
especie="";
}
if(nombre1==" "){
nombre1="";
}
if(nombre2==" "){
nombre2="";
}
if(lugar==" "){
lugar="";
}
if(habitat==" "){
habitat="";
}
if(ciclo==" "){
ciclo="";
}
if(observaciones==" "){
observaciones="";
}
$("#idbloque").css('display','block'); //94-lo muestro por si se hizo un NUEVO que lo invisibilizó
$("#fichar").css('display','block'); //95-lo muestro por si se hizo un NUEVO que lo invisibilizó
$("#idcaja").val(id); //96- cargo los input del form con los valores obtenidos de la fila en
$("#familia").val(familia); // 91 y adelante
$("#genero").val(genero);
$("#especie").val(especie);
$("#nombre1").val(nombre1);
$("#nombre2").val(nombre2);
$("#lugar").val(lugar);
$("#habitat").val(habitat);
$("#ciclo").val(ciclo);
$("#observaciones").val(observaciones);
var linkwiki= "https://es.wikipedia.org/wiki/" + genero + "_" + especie;
$("#wikilink").attr('href',linkwiki); // 97- apunto la href de la wiki
$("#wikilink").css('visibility','visible'); //98-porque lo invisibilizamos en nuevo
$("#sombra").css("height", $(document).height()); //99-sombra con alto de viewport
$("#sombra").css("width", $(document).width()); //100- sombra con ancho de viewport
$("#sombra").css("visibility","visible"); //101- sombra visible
$("#caja").center(); //102- centro form
$("#caja").css("display","block"); //103- muestro form
}); //fin edicion
/***********************OPERACIONES CON LAS FICHAS****************************************************** */
//************************NUEVA FICHA**************************************************************
$('body').on('click','#fichar', function(e){
$("#cajaficha").center(); // 104- centro form ficha
$("#cajaficha").css("display","block"); // 105-muestro form ficha ( sombra ya está desplegada)
var idficha = $("#idcaja").val(); // 106- recupero id de form
$("#idcajaficha").val(idficha); // 107- lo cargo en form ficha
$("#cicloficha").html($("#ciclo").val()); // 108- cargo el ciclo
$.ajax({
type: "POST",
url: "tec-php-abm-tabla-procesar01.php?accion=CFI", //C-argar FI-cha
data: 'idficha=' + idficha, //109-POSTeo el id para cargar data de la ficha Db
dataType:'json',
success: function(data) { //110-recupero por script los campos que faltan
$("#planta").val(data.genero + ' ' + data.especie); //111- cargo Género y especie (readonly)
$("#color").val(data.color); // 112- cargo los input con losvalores devueltos
$("#altura").val(data.altura); // idem...
$("#distancia").val(data.distancia);
$("#siembra").val(data.siembra);
$("#tipo_siembra").val(data.tipo_siembra);
$("#ubicacion").val(data.ubicacion);
$("#suelo").val(data.suelo);
$("#riego").val(data.riego);
$("#peso").val(data.peso);
$("#comentarios").val(data.comentarios);
},
error: function(request,error) {
$("#msg").html("ha ocurrido un error al cargar la ficha");
}
}); //fin ajax
//++++++++++++++++++++++++++++++++++++++++++
}); //fin ficha
$('body').on('click','#cancelarficha', function(e){
$("#cajaficha").css("display","none"); // 113-hago desaparecer el form ficha
$("#caja").css("display","none"); // 114-hago desaparecer el form editar
$(".valficha").val(''); // 115-borro el contenido de los inputs
$("#sombra").css("visibility","hidden"); // 116-quito la sombra
}); //fin cancelar ficha
//************************EDITAR FICHA**************************************************************
$('body').on('click','#guardarficha', function(e){
var idficha = $("#idcaja").val(); // 117- recupero de los inputs los valores editados
var color = $("#color").val(); // idem.....
var altura = $("#altura").val();
var distancia = $("#distancia").val();
var siembra = $("#siembra").val();
var tipo_siembra = $("#tipo_siembra").val();
var ubicacion = $("#ubicacion").val();
var suelo = $("#suelo").val();
var riego = $("#riego").val();
var peso = $("#peso").val();
var comentarios = $("#comentarios").val();
$.ajax({
type: "POST",
url: "tec-php-abm-tabla-procesar01.php?accion=EFI", //E-ditar FI-cha
//data: 'idficha=' + idficha, //118-POSTeo el id para editar data de la ficha Db
data: 'idficha=' + idficha + '&color=' + color + '&altura=' + altura + '&distancia=' + distancia + '&siembra=' + siembra + '&tipo_siembra=' + tipo_siembra + '&ubicacion=' + ubicacion + '&suelo=' + suelo + '&riego=' + riego + '&peso=' + peso + '&comentarios=' + comentarios, //28-POSTeo los pares valor/id/campo
dataType:'json',
success: function(data) {
if(data.resultado=='exito'){ //119- mensaje de éxito o error en UPDATE
$("#msg").html("La ficha " + idficha + " se editó con éxito");
}else{
$("#msg").html("La ficha " + idficha + " NO SE PUDO EDITAR");
}
$("#cajaficha").css("display","none"); // 120-hago desaparecer el form ficha
$("#caja").css("display","none"); // 121-hago desaparecer el form editar
$(".valficha").val(''); // 122-borro el contenido de los inputs
$("#sombra").css("visibility","hidden"); // 123-quito la sombra
},
error: function(request,error) {
$("#msg").html("ha ocurrido un error al editar la ficha");
}
}); //fin ajax
}); //fin guardarficha
// **********************VER FICHA **********************************************************
$('body').on('click','.ficha', function(e){
$("#sombra").css("height", $(document).height()); // 124-sombra con alto de viewport
$("#sombra").css("width", $(document).width()); // 125-sombra con ancho de viewport
$("#sombra").css("visibility","visible"); // 126-sombra visible
$("#muestraficha").center(); // 127-centro verficha
$("#muestraficha").css("display","block"); // 128-muestro verficha
var id= $(this).parents('tr').attr('id'); // 129-obtiene el id del <tr> es la fila del clicado
var genero = $('#'+id).find('.genero').children().html(); // 130-recuperogenero especie y nombre de la fila
var especie = $('#'+id).find('.especie').children().html(); // como en 77
var nombre1 = $('#'+id).find('.nombre1').children().html();
$("#fnombre1").html(nombre1); // 131- los escribo en el form
$("#fgenero").html(genero); // idem...
$("#fespecie").html(especie);
$.ajax({
type: "POST",
url: "tec-php-abm-tabla-procesar01.php?accion=CFI", //C-argar FI-cha
data: 'idficha=' + id, //132-POSTeo el id para cargar data de la ficha Db
dataType:'json',
success: function(data) {
$("#fciclo").html(data.ciclo); //133- lleno las celdas de la tabla con los valores
$("#fcolor").html(data.color); // devueltos por JSON
$("#faltura").html(data.altura);
$("#fdistancia").html(data.distancia);
$("#fsiembra").html(data.siembra);
$("#ftipo_siembra").html(data.tipo_siembra);
$("#fubicacion").html(data.ubicacion);
$("#fsuelo").html(data.suelo);
$("#friego").html(data.riego);
$("#fpeso").html(data.peso);
$("#fcomentarios").html(data.comentarios);
},
error: function(request,error) {
$("#msg").html("ha ocurrido un error al cargar la ficha");
}
}); //fin ajax
});
$('body').on('click','#salirficha', function(e){
$("#muestraficha").css("display","none"); // 134-hago desaparecer el form ficha
$("#sombra").css("visibility","hidden"); // 136- quito la sombra
}); //fin salir ficha
//**************************************************************BUSQUEDA*************************************
//************************ACTIVAR FILA DE BÚSQUEDA*************************************
$('body').on('click','#activobuscar', function(e){
if ($(this).val()=='ACTIVAR BUSCAR'){ // 135- si activo busqueda
$("#tbuscar").css("display","table-row"); // 136- fila buscar se hace visible (table-row NO block)
$(this).val('DESACTIVAR BUSCAR'); // 137- cambio botón
}else{
$("#tbuscar").css("display","none"); // 138- si desactivo
$(this).val('ACTIVAR BUSCAR'); // 139- cambio botón
vertodo(); // 140-limpia los input y muestra todas las filas
}
}); //fin activobuscar
//************************EJECUTAR LA BÚSQUEDA*************************************
$('body').on('click','#buscar1,#buscar2', function(e){ // 141-click en cualquiera de las dos lupas
var bfamilia = $('#tbuscar').find('#bfamilia').val(); // 142-recupero valor de INPUT familia
var bgenero = $('#tbuscar').find('#bgenero').val(); // idem...
var bespecie = $('#tbuscar').find('#bespecie').val();
var bnombre1 = $('#tbuscar').find('#bnombre1').val();
var bnombre2 = $('#tbuscar').find('#bnombre2').val();
var blugar = $('#tbuscar').find('#blugar').val();
var bhabitat = $('#tbuscar').find('#bhabitat').val();
var bobservaciones = $('#tbuscar').find('#bobservaciones').val();
var flag0 = false; // 143-asumimos por defecto que no hay nada para buscar
if(bfamilia.length!=0 || bgenero.length !=0 || bespecie.length !=0 || bnombre1.length !=0 || bnombre2.length !=0|| blugar.length !=0|| bhabitat.length !=0|| bobservaciones.length !=0){
flag0 = true; // 144-si algun imput tiene contenido va true
}
var filas = $("#tabla tbody").find("tr"); //145- devuelve todas las filas de la tabla
if(flag0){ // 146-si escribi algo en algún input de la búsqueda
for(i=1; i<filas.length; i++){ //147-arranco en 2, porque fila 0 títulos, fila 1 buscar
var celdas = $(filas[i]).find("td"); //148- devuelve todas las celdas de la fila i
var cfamilia = $(celdas[2]).children("div").text(); //149- celda[2] td familia, children la div con el texto
var cgenero = $(celdas[3]).children("div").text(); // idem...
var cespecie = $(celdas[4]).children("div").text();
var cnombre1 = $(celdas[5]).children("div").text();
var cnombre2 = $(celdas[6]).children("div").text();
var clugar = $(celdas[7]).children("div").text();
var chabitat = $(celdas[8]).children("div").text();
var cobservaciones = $(celdas[9]).children("div").text();
var flagfamilia = cfamilia.includes(bfamilia) && bfamilia.length!=0; //150- chequea si está lo buscado
var flaggenero = cgenero.includes(bgenero) && bgenero.length!=0; // y es distinto a vacío (largo !=0)
var flagespecie = cespecie.includes(bespecie) && bespecie.length!=0; // si es true lo carga en flagcampo
var flagnombre1 = cnombre1.includes(bnombre1) && bnombre1.length!=0;
var flagnombre2 = cnombre2.includes(bnombre2) && bnombre2.length!=0;
var flaglugar = clugar.includes(blugar) && blugar.length!=0;
var flaghabitat = chabitat.includes(bhabitat) && bhabitat.length!=0;
var flagobservaciones = cobservaciones.includes(bobservaciones) && bobservaciones.length!=0;
if(flagfamilia || flaggenero || flagespecie || flagnombre1 || flagnombre2 || flaglugar || flaghabitat || flagobservaciones){
$(filas[i]).css('display','table-row'); //151- si es true muestra la fila
}else{
$(filas[i]).css('display','none'); //152- si FALSE no la muestra
} //fin if cfamilia
} //fin for
}else{
vertodo(); //153- si todos los input de busqueda vacíos, vertodo
} //fin if flag0
}); //fin click buscar
//************************BORRAR LA BÚSQUEDA*************************************
$('body').on('click','#borrarbusqueda,#borrarbusqueda1', function(e){
vertodo(); //154-limpia los input y muestra todas las filas
}); //fin click borrarbusqueda sea gomita izq. o derecha clicada
var vertodo = function(){
$('#bfamilia').val(''); // 155- en blanco toda la ficha
$("#bgenero").val('');
$("#bespecie").val('');
$("#bnombre1").val('');
$("#bnombre2").val('');
$("#blugar").val('');
$("#bhabitat").val('');
$("#bobservaciones").val('');
$('.volveraver').css('display','table-row'); // 156- muestro nuevamente todas las filas
} // con data (class=volveraver)
//************************ORDENAR LAS FILAS*************************************
$('th').click(function() { // 157 al clicar sobre la cabecera de cualquier columna
//$("#prueba").html('*' + contenido + '*' + contenido.length);
if($(this).html().length !=0){ //157 bis si la celda está en blanco, no hago nada
var table = $(this).parents('table').eq(0); // 158 busca la tabla a la cual pertenece la columna
// .eq(0) selecciona el primer elemento del set.
var rows = table.find('tr').slice(2).toArray(); // 159 Busca el primer tr, corta en el 2° (slice(2) lo incluye,
// y convierte en array (saltea el 1°, es el de búsqueda)
var columna = $(this).index(); // 160 recupero el índice de la columna (empieza en cero)
rows.sort(comparador(columna)); // 161 sort ordena el array usando la funcion comparador.
this.asc = !this.asc // 162 al principio this.asc es undefined no está ordenada
// así que lo niego !undefined = true .
if (!this.asc) { // 163 la primera vez es !true no se efectua.
rows = rows.reverse() // 164 si es !false invierte el orden del array
}
for (var i = 0; i < rows.length; i++) { // 165 el bucle agrega desde 0 a la última las filas ordenadas
table.append(rows[i]);
}
CambiaIcono($(this), this.asc); // 166 coloca o cambia el ícono de orden y el color del head.
}
})
function comparador(col) { // 167 función comparador de .sort pasa el índice de columna
return function(a, b) {
var valA = $(a).children('td').eq(col).html();// 168 Mete el valor de la celda (fila superior, columna)
var valB = $(b).children('td').eq(col).html();// 169 Mete el valor de la celda (fila inferior, columna)
if ($.isNumeric(valA) && $.isNumeric(valB)){ // 170 si ambos valores son numéricos
return valA - valB; // 171 los resta
}else{
return valA.localeCompare(valB); // 172 si no compara los strings con el abecedario local.
}
}
}
function CambiaIcono(rotulo, orden) {
$("th").each(function(index) { // 173 para todas las celdas cabecera quita color y flechas
$(this).removeClass("sorting");
$(this).removeClass("asc");
$(this).removeClass("desc");
});
rotulo.addClass("sorting"); // 174 a la celda clicada le da anaranjado.
if (orden){ // 175 orden = this.asc true si es ascendente
rotulo.addClass("asc"); // 176 clase con :after flecha arriba
}else{
rotulo.addClass("desc"); // 177 clase con :after flecha abajo
}
}
}); //fin ready
</script>
******************************* CSS OBLIGATORIO PARA ORDENAR *************************************
table tr th {
cursor: pointer;
}
.sorting {
color:orangered;
}
.asc:after {
content: ' ↑';
}
.desc:after {
content: " ↓";
}
******************************* CSS PARA DARLE ESTILO A LA TABLA ********************************
table{
border-collapse: collapse;
font-size: .8rem;
}
td{
border: #000 solid 1px;
margin: 0px;
padding: 5px;
padding-bottom:3px;
padding-top:3px;
}
/* si queremos los títulos tb con borde repetir css de td en th */
******************************* HTML Y PHP DE LA TABLA ********************************************
<table id="tabla">
<thead>
<tr>
<th style="width: 15px;">ID</th>
<th style="width: 15px;"></th>
<th style="width: 100px;">FAMILIA</th>
<th style="width: 80px;">GÉNERO</th>
<th style="width: 80px;">ESPECIE</th>
<th style="width: 140px;">NOMBRE 1</th>
<th style="width: 130px;">NOMBRE 2</th>
<th style="width: 60px;">LUGAR</th>
<th style="width: 180px;">HABITAT</th>
<th style="width: 140px;">OBSERVACIONES</th>
<th style="width: 15px;"></th>
<th style="width: 15px;"></th>
<th style="width: 15px;"></th>
</tr>
</thead>
<tbody>
<!-- INICIO Fila para la búsqueda-->
<tr id="tbuscar" style="height: 20px; display:none;">
<td><i id="borrarbusqueda" class="fa fa-eraser" aria-hidden="true"></i></td>
<td><i id="buscar1" class="fa fa-search" aria-hidden="true"></i></td>
<td><input id="bfamilia" class='buscar' type='text' value='' /></td>
<td><input id="bgenero" class='buscar' type='text' value='' /></td>
<td><input id="bespecie" class='buscar' type='text' value='' /></td>
<td><input id="bnombre1" class='buscar' type='text' value='' /></td>
<td><input id="bnombre2" class='buscar' type='text' value='' /></td>
<td><input id="blugar" class='buscar' type='text' value='' /></td>
<td><input id="bhabitat" class='buscar' type='text' value='' /></td>
<td><input id="bobservaciones" class='buscar' type='text' value='' /></td>
<td> </i></td>
<td><i id="buscar2" class="fa fa-search" aria-hidden="true"></i></td>
<td><i id="borrarbusqueda1" class="fa fa-eraser" aria-hidden="true"></i></td>
</tr>
<!-- FIN Fila para la búsqueda-->
<?php
if(conectar()){
mysqli_set_charset($conn, "utf8mb4");
$sqltxt = "SELECT * FROM plantas";
$sqldevolucion = mysqli_query($conn,$sqltxt);
if (!mysqli_num_rows($sqldevolucion)) {
echo("Error, no se devuelven registros");
} else {
while ($registro = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC)){
echo("<tr class='volveraver' id='" . $registro["id"] . "'>");
//echo("<td class='filaid'>" . $registro["id"] . " <span class='ciclo' style='display:none'>". $registro["ciclo"] . "</span></td>" );
echo("<td class='filaid'>" . $registro["id"] . "</td>" );
$wiki="https://es.wikipedia.org/wiki/". $registro["genero"] . "_" .$registro["especie"];
echo("<td class='wiki'><a class='wlink' href='". $wiki ."' target='_blank'><i class='fa fa-wikipedia-w' aria-hidden='true'></i></a></td>" );
echo("<td class='familia'> <div class='entrada'>" . $registro["familia"] . "</div></td>" );
echo("<td class='genero'> <div class='entrada'>" . $registro["genero"] . "</div></td>" );
echo("<td class='especie'> <div class='entrada'>" . $registro["especie"] . "</div></td>" );
echo("<td class='nombre1'> <div class='entrada'>" . $registro["nombre1"] . "</div></td>" );
echo("<td class='nombre2'> <div class='entrada'>" . $registro["nombre2"] . "</div></td>" );
echo("<td class='lugar'> <div class='entrada'>" . $registro["lugar"] . "</div></td>" );
echo("<td class='habitat'> <div class='entrada'>" . $registro["habitat"] . "</div></td>" );
echo("<td class='observaciones'> <div class='entrada'>" . $registro["observaciones"] . "</div></td>" );
echo("<td class='ficha' ><a href='javascript:void(0)'><i class='fa fa-eye' aria-hidden='true' style='color:darkcyan;'></i></a> <span class='ciclo' style='display:none'>". $registro["ciclo"] . "</span> </td>");
echo("<td class='edicion'><a href='javascript:void(0)'><i class='fa fa-pencil' aria-hidden='true'></i></a></td>" );
echo("<td class='borrar'><a href='javascript:void(0)'><i class='fa fa-minus-circle fa-lg' aria-hidden='true' style='color:red;'></i></a></td>" );
echo("</tr>");
}
mysqli_free_result($sqldevolucion); //devuelvo recurso a memoria
mysqli_close($conn); // cierro conexion
}
}else{
echo(mysqli_error($conn));
}
?>
</tbody>
</table>
***********************************SCRIPT PHP PARA LOS AJAX********************************************
<?php
include("conexion.php"); // abre la conexión a la base de datos
global $conn; //lo usamos en conexion, lo declaramos acá para no llamar siempre a $GLOBALS[]
if(conectar()){
mysqli_set_charset($conn, "utf8mb4");
$accion= $_GET["accion"]; // recupero que acción manda AJAX
switch ($accion) {
case"ECE": // E-ditar CE-lda
$valor=$_POST["valor"]; // se recupera el valor pasado de ajax por post
$id=$_POST["id"]; // se recupera el id de la fila que edito
$campo = $_POST["campo"]; // se recupera el nombre del campo que estoy editando
if(strlen($valor)==0){
$valor=" ";
}
$sqltxt="UPDATE plantas SET " . $campo . "='" . $valor . "' WHERE id=" . $id;
$sqldevolucion = mysqli_query($conn,$sqltxt);
$sqltxt="SELECT " . $campo . " FROM plantas WHERE id=" . $id; //chequeo que se haya modificado
$sqldevolucion = mysqli_query($conn,$sqltxt);
$registro = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC);
$resultado = array("newvalor" => $registro[$campo]);
mysqli_close($conn); // cierro conexion
sleep(.5);
echo(json_encode($resultado));
break;
case"NRE": //N-uevo RE-gistro
if(strlen($_POST["familia"])==0){ //si algún campo queda vacío lo reemplazo por un
$f=" ";
}else{
$f = $_POST["familia"];
}
if(strlen($_POST["genero"])==0){
$g=" ";
}else{
$g = $_POST["genero"];
}
if(strlen($_POST["especie"])==0){
$e=" ";
}else{
$e = $_POST["especie"];
}
if(strlen($_POST["nombre1"])==0){
$n1=" ";
}else{
$n1 = $_POST["nombre1"];
}
if(strlen($_POST["nombre2"])==0){
$n2=" ";
}else{
$n2 = $_POST["nombre2"];
}
if(strlen($_POST["lugar"])==0){
$n3=" ";
}else{
$n3 = $_POST["lugar"];
}
if(strlen($_POST["habitat"])==0){
$h=" ";
}else{
$h = $_POST["habitat"];
}
if(strlen($_POST["ciclo"])==0){
$c=" ";
}else{
$c = $_POST["ciclo"];
}
if(strlen($_POST["observaciones"])==0){
$o=" ";
}else{
$o = $_POST["observaciones"];
}
$sqltxt="SELECT id FROM plantas WHERE genero='" . $g . "' AND especie='" . $e . "'"; //chequeo que no exista la especie
$sqldevolucion = mysqli_query($conn,$sqltxt);
if(mysqli_num_rows($sqldevolucion)!=0){ // si hay registros devuelvo en id "nulo" para poder procesarlo
$resultado=array("id" => 'nulo');
echo(json_encode($resultado));
}else{
$param= "'".$f . "','" . $g . "','" . $e . "','" . $n1 ."','".$n2 ."','".$n3 ."','".$h ."','".$c ."','".$o."'";
$sqltxt = "INSERT INTO plantas (familia,genero,especie,nombre1,nombre2,lugar,habitat,ciclo,observaciones) VALUES(".$param.")";
$sqldevolucion = mysqli_query($conn,$sqltxt);
$sqltxt="SELECT * FROM plantas WHERE genero='" . $g . "' AND especie='" . $e . "'"; //chequeo que se haya modificado
$sqldevolucion = mysqli_query($conn,$sqltxt);
$resultado = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC);
mysqli_free_result($sqldevolucion); //devuelvo recurso a memoria
mysqli_close($conn); // cierro conexion
//$resultado = array("id" => $id,"familia" => $f,"genero" =>$g,"especie" =>$e,"nombre1" =>$n1,"nombre2" =>$n2,"lugar" =>$n3,"habitat" =>$h,"observaciones" =>$o);
echo(json_encode($resultado));
}
break;
case"ERE": //E-ditar RE-gistro
$id = $_POST["idcaja"]; // recupero el id a editar
if(strlen($_POST["familia"])==0){ //si algún campo queda vacío lo reemplazo por un
$f=" ";
}else{
$f = $_POST["familia"];
}
if(strlen($_POST["genero"])==0){
$g=" ";
}else{
$g = $_POST["genero"];
}
if(strlen($_POST["especie"])==0){
$e=" ";
}else{
$e = $_POST["especie"];
}
if(strlen($_POST["nombre1"])==0){
$n1=" ";
}else{
$n1 = $_POST["nombre1"];
}
if(strlen($_POST["nombre2"])==0){
$n2=" ";
}else{
$n2 = $_POST["nombre2"];
}
if(strlen($_POST["lugar"])==0){
$n3=" ";
}else{
$n3 = $_POST["lugar"];
}
if(strlen($_POST["habitat"])==0){
$h=" ";
}else{
$h = $_POST["habitat"];
}
if(strlen($_POST["ciclo"])==0){
$c=" ";
}else{
$c = $_POST["ciclo"];
}
if(strlen($_POST["observaciones"])==0){
$o=" ";
}else{
$o = $_POST["observaciones"];
}
$sqltxt="UPDATE plantas SET familia = '" . $f . "', genero = '" . $g . "', especie = '" . $e . "', nombre1 = '" . $n1 . "', nombre2 = '" . $n2 . "' , lugar = '" . $n3 . "',habitat = '" . $h . "' , ciclo = '" . $c . "' , observaciones = '" . $o . "' WHERE id = ".$id;
$sqldevolucion = mysqli_query($conn,$sqltxt);
$sqltxt="SELECT * FROM plantas WHERE id = ".$id; //chequeo que se haya modificado
$sqldevolucion = mysqli_query($conn,$sqltxt);
$resultado = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC);
mysqli_free_result($sqldevolucion); //devuelvo recurso a memoria
mysqli_close($conn); // cierro conexion
echo(json_encode($resultado));
break;
case"BRE": //B-orrar RE-gistro
$id=$_POST["id"]; // se recupera el id de la fila que voy a borrar
$sqltxt="DELETE FROM plantas WHERE id=" . $id;
$sqldevolucion = mysqli_query($conn,$sqltxt);
if($sqldevolucion){
$resultado=array("id" => $id);
}else{
$resultado=array("id" => 'nulo');
}
mysqli_close($conn);
echo(json_encode($resultado));
break;
case"CFI": //C-argar FI-cha
$id = $_POST["idficha"]; // se recupera el id de la ficha
$sqltxt="SELECT * FROM plantas WHERE id = ".$id; //recupero de la tabla los datos
$sqldevolucion = mysqli_query($conn,$sqltxt);
$resultado = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC);
mysqli_free_result($sqldevolucion); //devuelvo recurso a memoria
mysqli_close($conn); // cierro conexion
//$resultado = array("id" => $id,"familia" => $f,"genero" =>$g,"especie" =>$e,"nombre1" =>$n1,"nombre2" =>$n2,"lugar" =>$n3,"habitat" =>$h,"observaciones" =>$o);
echo(json_encode($resultado));
break;
case"EFI": //E-ditar FI-cha
$id = $_POST["idficha"]; // se recupera el id de la ficha
$c = $_POST["color"]; // se recuperan los campos enviados
$a = $_POST["altura"]; // .....
$d = $_POST["distancia"];
$s = $_POST["siembra"];
$t = $_POST["tipo_siembra"];
$u = $_POST["ubicacion"];
$su = $_POST["suelo"];
$r = $_POST["riego"];
$p = $_POST["peso"];
$co = $_POST["comentarios"];
$sqltxt="UPDATE plantas SET color = '" . $c . "', altura = '" . $a . "', distancia = '" . $d . "', siembra = '" . $s . "', tipo_siembra = '" . $t . "' , ubicacion = '" . $u . "',suelo = '" . $su . "' , riego = '" . $r . "' , peso = '" . $p . "' , comentarios = '" . $co . "' WHERE id = ".$id;
$sqldevolucion = mysqli_query($conn,$sqltxt);
mysqli_close($conn); // cierro conexion
$resultado = array("resultado" => 'exito'); // mensaje de éxito
echo(json_encode($resultado));
break;
}
}
?>