Como aplicar un ordeno burbuja a una tabla?

milomondo · #1 (**permalink**) 14/07/2012, 15:36

Buenas tardes!
Veran, tengo el siguiente muy problematico problema:

Tengo que hacer un programita en Javascript, donde cuando ingreso un usuario, unos datos en una casillas de texto, deben de ir apareciendo filas dinamicamente en una tabla mostrando los datos ingresados (como nombre,datos y puntos de un jugador).
Ya tengo la tabla y en ella aparecen los datos que quiero, pero necesito lo siguiente:

Que las filas de la tabla cambien de orden segun que "jugador" tiene mas puntos.
es decir, que en algun momento del programa, la tabla se actualize cmiabnado de lugar la fila que muestra todos los datos del jugador que tiene mas puntaje al principio, y el que va perdiendo al final.
hasta ahora los datos de los usuarios solo quedan en orden segun los fui ingresando.
Ayuda porfavor! :(

Este es el codigo de la funcion por si ayuda:

Código Javascript:

Ver originalfunction agregaFila(tableId)
{
var table = document.getElementById(tableId);
//for(var i=0; i<nombres.length;i++){
var pos = table.rows.length;
var row = table.insertRow(pos);
var cell_0 = row.insertCell(0);
var cell_1 = row.insertCell(1);
var cell_2 = row.insertCell(2);
var cell_3 = row.insertCell(3);
var cell_4 = row.insertCell(4);
cell_0.style.border='solid 3px blue';
cell_0.innerHTML=nombres[nombres.length -1];
cell_1.style.border='solid 3px blue';
cell_1.innerHTML=apellidos[apellidos.length -1];
cell_2.style.border='solid 3px blue';
cell_2.innerHTML=numeros[numeros.length -1];
cell_3.style.border='solid 3px blue';
cell_3.innerHTML=numeros[escuderias.length -1];
cell_4.style.border='solid 3px blue';
cell_4.innerHTML=numeros[puntos.length -1];
}

("numeros","nombres","escuderias","puntos" y "apellidos" son los nombres de los Arrays donde ingresan los datos para luego pasarlos a la tabla en orden)

La tabla la genero en un html aparte que es:

Código HTML:

Ver original<p align="right"><table id="mitabla">
<tr>
<td style="border: solid 4px blue;">Nombres</td>
<td style="border: solid 4px blue;">Apellidos</td>
<td style="border: solid 4px blue;">N°de.Auto</td>
<td style="border: solid 4px blue;">Escuderia</td>
<td style="border: solid 4px blue;">Puntos</td>
</tr>
</table></p>

Estoy ya desesperado xD, cualquier ayuda es muy agradecida.

emprear · #2 (**permalink**) 15/07/2012, 17:23

Nunca desesperes porque es peor.

Como no me queda muy claro de dónde recibis los datos y construís los arrays correspondientes(lo hacés manualmente?, hay una base de datos?, te los genera otra script?, etc) Te pasó esto que quizás te sirva

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Orden dinámico</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function agregar_datos(){
var fila = "";
var contenido_celda;
var tabla = document.getElementById('mitabla');
var pos = tabla.rows.length;
var puntos = ['300|juan|ford|','500|pedro|toyota|','250|pablo|mercedes|','20|luis|audi|']; // esto es lo que hay que construir para obtener los datos
puntos.sort(); // ordenás
for (i=0; i<puntos.length; i++) {
contenido_celda =puntos[i].split('|');
var filas = tabla.insertRow(pos);
var celda_0 = filas.insertCell(0);
var celda_1 = filas.insertCell(1);
var celda_2 = filas.insertCell(2);
celda_0.innerHTML=contenido_celda[1];
celda_1.innerHTML=contenido_celda[2];
celda_2.innerHTML=contenido_celda[0];
}
}
window.onload = agregar_datos;
//]]>
</script>
</head>
<body>
<table border="1" id="mitabla">
<tr>
<th>Nombre</th>
<th>Escuderia</th>
<th>Puntos</th>
</tr>
</table>
</body>
</html>

la clave un poco es poder construir el array puntos con todos los valores necesarios.
Descuento que acá no hay nada en php y mySql, porque si no el ordenamiento lo harías desde ahi
la estilización hacela por medio de css
Saludos

milomondo · #3 (**permalink**) 16/07/2012, 16:46

Muchas gracias pro responder! (fuiste la unica persona en hacerlo ademas)

Recien veo esta respuesto y pues inetnatré entenderla mas, dices que las filas se ordenan segun quien tiene mayor cantidad de puntos?

Con agregar un "for" de puntaje sera suficiente entonces? ,porque otras varas cosas que agregaste al codigo no las entiendo yo, nunca las habia visto.

Sobre tu pregunta pues los arrays los ingresa el usuario, es decir que los datos son dinamicos y no lo manejo yo, el usuario del programa ingresa su nombre y otros datos, y estos quedan guardados en Arrays, que utilizo para que sus datos indexados se muestren luego en la celdas.
Me entiendes?, cualquier ayuda muchas gracias, tengo que resolver este problema en menos de 24 hs.

Intentare no desesperarme. xD

emprear · #4 (**permalink**) 16/07/2012, 17:30

Vos insistís en que los datos se guardan en un array(), eso te servirá para manipularlos con javascript, pero yo te pregunto una vez más, esos datos, no se guardan en el servidor?

Por otro lado, el ingreso de los datos por parte del usuario, se realizarán desde algún form, ok, pero:
esos datos obtenidos desde el form los manejarás con tu script (javascript o lo que sea), los usuarios no crean su propio script quiero creer

Vos en definitiva, con lo que te propuse, tenés que crear esta estructura, que no es para nada complicada (la hice para tres columnas para simplificar)

Código Javascript:

Ver originalvar puntos = ['300|juan|ford|','500|pedro|toyota|','250|pablo|mercedes|','20|luis|audi|'];

Después la tabla generada se ordena sola
Saludos

Saludos

furoya · #5 (**permalink**) 16/07/2012, 20:00

Un pequeño detalle en ese ejemplo.

sort() ordena alfabeticamente, así que para números hay que hacerle un pequeño ajuste.

Para entender mejor el problema, se pueden usar estos datos

Código:

var puntos = ['300|juan|ford|','500|pedro|toyota|','250|pablo|mercedes|','25|luis|audi|'];

Y después probar el ordenamiento.

Por supuesto, una forma fácil es justamente poner los números con estructura de texto.

Código:

var puntos = ['300|juan|ford|','500|pedro|toyota|','250|pablo|mercedes|','025|luis|audi|'];

Pero de última no cuesta nada agregar una funcioncita para convertir a ordenador de números

Ordenar números

milomondo · #6 (**permalink**) 16/07/2012, 20:27

Que rapida respuesta, y perdona mi ignorancia, pero:
Sinceramente no estoy seguro de a que te refieres con lo de un servidor, yo creo que no, los datos solo se guardan en un Array(), luego de cerrar el programa estos desaparecen tambien.
Y esos datos los manejo yo con estas funciones, todas en Javascript si.

Inenté supolantando la funcion, pero al ser datos dinamicos no puedo definir "puntos" como me los muestras, no estoy muy seguro si tiene alguna logica,pero tambien intenté asi:

Código Javascript:

Ver originalvar puntos = ['Nombres[0]|Apellidos[0]|Numeros[0]|Escuderias[0]|','Nombres[1]|Apellidos[1]|Numeros[1]|Escuderias[1]|','Nombres[2]|Apellidos[2]|Numeros[2]|Escuderias[2]|','Nombres[3]|Apellidos[3]|Numeros[3]|Escuderias[3]|'];

Pero me aparecen bajo la tabla como texto, y ese ni es el menor problema, ya que aparecen todas al mismo tiempo.Y en mi caso, yo quiero que aparescan de a uan las filas a medida que las voy ingresando.
Como hace la primera funcion que aqui compartí.
Si una persona crea esos array's y agrega los datos dinamincamente ingresnadolos desde una casillas de texto, las filas aparecen a medida que se ingresan los datos, yo quiero que luego estas se actualizen solas o al hacer click en algun boton segun quien tiene mayor numero.

estas son las casillas que yo uso, con su boton, cadadato se guarda en un array:

Código Javascript:

Ver original<legend align="left"><b><font color="white">Registrase :<font></b></legend>
<P align="left"><input id= "Inombre" type="text"><b><font color="white">  Ingrese su nombre</font> 
<P align="left"><input id= "Iapellido" type="text"><b><font color="white">  Ingrese su apellido</font></p>
<P align="left"><input id= "Iescuderia" type="text"><b><font color="white">  Ingrese escudería</font></p>         
<P align="left"><input id= "Inumero" type="text"><b><font color="white">  Ingrese nº.De auto</font></p>
<P align="left"><input id= "Icarga" type="text"><b><font color="white">  Ingrese carga inicial</font></p>
<P align="left"><input id= "Irecarga" type="text"><b><font color="white">  Ingrese recarga</font></p>
<P align="left"><button type="button" style="border: 0px"  class="BTN_TRANS" , id="aceptar" onClick="principal(); agregaFila('mitabla')" " "><img src="accept.jpg"></button></p><br><br>
</fieldset></p>

Estos son los array:

Código Javascript:

Ver originalvar Nombres = new Array();
var Apellidos = new Array();
var Escuderias = new Array();
var Numeros = new Array();
 
Nombres [Nombres.length] = Nombre;
            $("#Inombre").val ("");
            Apellidos [Apellidos.length] = Apellido;
            $("#Iapellido").val ("");
            Escuderias [Escuderias.length] = Escuderia;
            $("#Iescuderia").val ("");
            Numeros [Numeros.length] = Numero;
            $("#Inumero").val ("");

Justamente como yo soy un novato en esto, estaba buscando intentar ordenar la tabla on el ordeno burbuja que es el unico que se, pero cualquier cosa me serviviera en cuanto tenga la misma funcion.
Es solo que ahora intento con este metodo y no consigo resultados.

emprear · #7 (**permalink**) 16/07/2012, 23:36

Cita:

Iniciado por furoya

Un pequeño detalle en ese ejemplo.

sort() ordena alfabeticamente, así que para números hay que hacerle un pequeño ajuste.

Para entender mejor el problema, se pueden usar estos datos

Código:

var puntos = ['300|juan|ford|','500|pedro|toyota|','250|pablo|mercedes|','25|luis|audi|'];

Y después probar el ordenamiento.

Por supuesto, una forma fácil es justamente poner los números con estructura de texto.

Código:

var puntos = ['300|juan|ford|','500|pedro|toyota|','250|pablo|mercedes|','025|luis|audi|'];

Pero de última no cuesta nada agregar una funcioncita para convertir a ordenador de números

Ordenar números

Imperdonable error el mío @furoya, son los vicios de php (que tiene natsort())

Tampoco me rompí mucho la cabeza para solucionarlo, ya que alguien lo hizo por mí.
@milomondo
acá van las correciones

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Orden dinámico</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
// Créditos de alphanum() para Brian Huisman http://my.opera.com/GreyWyvern/blog/show.dml/1671288
function alphanum(a, b) {
  function chunkify(t) {
    var tz = [], x = 0, y = -1, n = 0, i, j;
    while (i = (j = t.charAt(x++)).charCodeAt(0)) {
      var m = (i == 46 || (i >=48 && i <= 57));
      if (m !== n) {
        tz[++y] = "";
        n = m;
      }
      tz[y] += j;
    }
    return tz;
  }
  var aa = chunkify(a);
  var bb = chunkify(b);
  for (x = 0; aa[x] && bb[x]; x++) {
    if (aa[x] !== bb[x]) {
      var c = Number(aa[x]), d = Number(bb[x]);
      if (c == aa[x] && d == bb[x]) {
        return c - d;
      } else return (aa[x] > bb[x]) ? 1 : -1;
    }
  }
  return aa.length - bb.length;
}
 
function agregar_datos(){
var fila = "";
var contenido_celda;
var tabla = document.getElementById('miTabla');
var pos = tabla.rows.length;
var puntos = ['300|juan|ford|','500|pedro|toyota|','250|pablo|mercedes|','20|luis|audi|','1000|furoya|citröen','1|emprear|peugeot|','345|milomondo|ferrari|']; // esto es lo que hay que construir para obtener los datos
puntos.sort(alphanum); // ordenás
for (i=0; i<puntos.length; i++) {
contenido_celda =puntos[i].split('|');
var filas = tabla.insertRow(pos);
var celda_0 = filas.insertCell(0);
var celda_1 = filas.insertCell(1);
var celda_2 = filas.insertCell(2);
celda_0.innerHTML=contenido_celda[1];
celda_1.innerHTML=contenido_celda[2];
celda_2.innerHTML=contenido_celda[0];
}
}
 
window.onload = agregar_datos;
//]]>
</script>
</head>
<body>
<table id="miTabla" border="1">
<tr>
<th>Nombre</th>
<th>Escuderia</th>
<th>puntos</th>
</tr>
</table>
</body>
</html>

Demo:
http://foros.emprear.com/javascript/natsort-js.html

Saludos

milomondo · #8 (**permalink**) 17/07/2012, 13:00

Tengo 6 Array`s principales relacionados con sus indices es decir:

Nombres[o]
Edad[o]

Es de la misma persona, quiero ordenarlos Por edad mas alta sin perder ese indice, es decir ordenarlos por "ordeno burbuja" en este caso.
Una ves ordenados que se muestren en una tabla HTML.
Nombres | Edad | Nº de Auto

Los Array`s son dinamicos, los datos los ingresa el usuario, las filas tienen que ir apareciendo de a una.
Es decir, cuando el usuario ingresa todos los datos y al darle al boton "aceptar" debe aparecer una fila con sus datos, y al ingresar otro, debe ordenarce.

furoya · #9 (**permalink**) 17/07/2012, 16:23

No, nada de "imperdonable", emprear. Hasta te diría que estuvo bien "mal puesto" ese sort().

En realidad quién debió descubrirlo al probar tu código fue milomondo, pero creo que sigue en la suya, ignoró mi comentario como viene ignorando tu ejemplo. Ahora descubrimos que no usa javascript sino ... ¿qué es? ¿jquery?. Bueno, no importa. Tengo la sospecha que copia muy bien, pero en verdad no entiende ni tiene muchas ganas de entender.

Si el último post no es un traslado que hizo algún moderador porque abrió otro tema igual, es evidente que quiere el trabajo hecho. O se está divirtiendo con nosotros.

emprear · #10 (**permalink**) 17/07/2012, 16:28

Cita:

Iniciado por milomondo

Tengo 6 Array`s principales relacionados con sus indices es decir:

Nombres[o]
Edad[o]

Es de la misma persona, quiero ordenarlos Por edad mas alta sin perder ese indice, es decir ordenarlos por "ordeno burbuja" en este caso.
Una ves ordenados que se muestren en una tabla HTML.
Nombres | Edad | Nº de Auto

Los Array`s son dinamicos, los datos los ingresa el usuario, las filas tienen que ir apareciendo de a una.
Es decir, cuando el usuario ingresa todos los datos y al darle al boton "aceptar" debe aparecer una fila con sus datos, y al ingresar otro, debe ordenarce.

Como es la cosa, primero era por puntos, ahora por edad, si bien parece no diferir mucho entre un valor y otro, en definitiva son números, estás cambiando el criterio (apuesto a que bien podrías haber dicho x nombre ó apellido).
Si bien te he dejado no solo datos teóricos, sino también una demo "funcionando" (y con las correcciones necesarias tras advertir el error que me señaló @furoya), parecería que no estás analizando el código que te estoy dejando, que vaya la novedad, para eso lo dejo, para que lo analices.
Te repetís en términos como "ordenamiento de burbuja", arrays múltiples, etc, los cuales ni siquiera son necesarios para lo que necesitas, con un sort() y un único array te suficiente (considerando por supuesto que has dicho que la tabla se genera al vuelo y que no es necesario almacenar esos valores para su posterior uso.

Te he desarrollado aun más el ejemplo (acotado a tres columnas) para que lo verifiques
http://foros.emprear.com/javascript/...t-js-form.html

Desde ya que faltan mejoras, validación de campos vacíos, posibilidades de edición si hubiese algún error, tal vez un confirm previo a la inserción.
La ayuda que se te pueda dar en el foro tiene límites y la superación de los mismos depende de tu conocimiento.
Para finalizar te aclaro que en la Web abundan funciones para ordenamiento de tablas con javascript, muchas de ellas muy atractivas, lamentablemente no conozco ninguna que trabaje correctamente con tablas generadas dinamicammente como las tuyas, solo lo hacen si la tabla ya está definida en el DOM, y eso implicaría el uso de otro lenguaje, como php (cosa que no descartaría).
Por mi parte, no es mucho más lo que te puedo aportar

Saludos